Не могу создать Pie компонент из библиотеки nivo

Не создается Pie компонент из библиотеки nivo, ошибок тоже не выдает, вот код:

import './style/styles.css'

import Header from './components/Header'
import { ResponsiveLine } from '@nivo/line'
import { inc } from './components/utils'
import { useState } from 'react'
import {MyResponsivePie} from './components/Pie'

type Flavor = 'svg'

type ChartLineProps = {
    flavor: Flavor
    iteration: number
}

console.clear()

const props = {
    enableSlices: 'x',
    margin: { top: 20, right: 20, bottom: 60, left: 80 },
} as const

function ChartLine({ flavor }: ChartLineProps) {
    const data = [
        {
    /*
    Создаю цикл, который генерирует время по X
    Этот цикл создает массив с одним обьектом, содержащим массив данных для графика
    Внутри этого массива мы передаем значение 24, что означает, что он создаст 24 обьекта, и каждый из них со свойствами x, y
    Изначально я написал, так:
    { x: '00:00', y: Math.round(Math.random() * 100)},
    { x: '01:00', y: Math.round(Math.random() * 100)},
    { x: '02:00', y: Math.round(Math.random() * 100)},
    ...
    { x: '23:00', y: Math.round(Math.random() * 100)},
    */
          id: `км/ч`,
          data: Array.from({ length: 24 }, (_, i) => ({
            x: `${i.toString().padStart(2, '0')}:00`,
            y: Math.round(Math.random() * 100)
          }))
        }
      ];

    /*
    Проверяю поступившие данные
    Кидаю бряку в консоли на return <ResponsiveLine data={data} {...props} />
    Выдает все правильно
    */

    console.log(data)

    return <ResponsiveLine data={data} {...props} />
}

export default function App() {
    const [flavor, setFlavor] = useState<Flavor>('svg')
    const [iteration, setIteration] = useState(inc)

    return (
        <div className='App'>
            <Header onButtonClick={() => setIteration(inc)} />
            <div className='Chart'>
                <ChartLine {...{ flavor, iteration }} />
            </div>
            <div className='Pie'>
                <MyResponsivePie data/>
            </div>
        </div>
    )
}

Код со второго файла:

import { ResponsivePie } from '@nivo/pie'

const data = [
    {
      "id": "javascript",
      "label": "javascript",
      "value": 198,
      "color": "hsl(229, 70%, 50%)"
    },
    {
      "id": "hack",
      "label": "hack",
      "value": 352,
      "color": "hsl(92, 70%, 50%)"
    },
    {
      "id": "erlang",
      "label": "erlang",
      "value": 379,
      "color": "hsl(202, 70%, 50%)"
    },
    {
      "id": "make",
      "label": "make",
      "value": 272,
      "color": "hsl(287, 70%, 50%)"
    },
    {
      "id": "rust",
      "label": "rust",
      "value": 540,
      "color": "hsl(289, 70%, 50%)"
    }
  ]

export const MyResponsivePie = ({ data /* see data tab */ }: {data:any}) => (
    <ResponsivePie
        data={data}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        activeOuterRadiusOffset={8}
        borderWidth={1}
        borderColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    0.2
                ]
            ]
        }}
        arcLinkLabelsSkipAngle={10}
        arcLinkLabelsTextColor="#333333"
        arcLinkLabelsThickness={2}
        arcLinkLabelsColor={{ from: 'color' }}
        arcLabelsSkipAngle={10}
        arcLabelsTextColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    2
                ]
            ]
        }}
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'ruby'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'c'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'go'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'python'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'scala'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'lisp'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'elixir'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'javascript'
                },
                id: 'lines'
            }
        ]}
        legends={[
            {
                anchor: 'bottom',
                direction: 'row',
                justify: false,
                translateX: 0,
                translateY: 56,
                itemsSpacing: 0,
                itemWidth: 100,
                itemHeight: 18,
                itemTextColor: '#999',
                itemDirection: 'left-to-right',
                itemOpacity: 1,
                symbolSize: 18,
                symbolShape: 'circle',
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemTextColor: '#000'
                        }
                    }
                ]
            }
        ]}
    />
)