nivo pie chart, typescript, is missing the following properties from type 'unknown[]': length, pop, push, concat, and 31 more

Question

import { ResponsivePie } from '@nivo/pie'
import { data } from './Data'

export const PieChartDemo = ({ data: any }) => (
  <div style={{ width: '600px', height: '500px' }}>
    <ResponsivePie
      data={data}
      margin={{ top: 40, right: 150, bottom: 80, left: 150 }}
      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]] }}
      valueFormat={(value) => `${Number(value)} %`}
      legends={[
        {
          anchor: 'bottom',
          direction: 'row',
          justify: false,
          translateX: 0,
          translateY: 56,
          itemsSpacing: 0,
          itemWidth: 90,
          itemHeight: 18,
          itemTextColor: '#999',
          itemDirection: 'left-to-right',
          itemOpacity: 1,
          symbolSize: 15,
          symbolShape: 'circle',
          effects: [
            {
              on: 'hover',
              style: {
                itemTextColor: '#000',
              },
            },
          ],
        },
      ]}
    />
  </div>
)

Data:

const totalFollowers = 594.2
const totalMostPopularPosts = 434
const convertToPercent = (val: number, total: number) => {
  return ((val / total) * 100).toFixed(1);
}

export const data = {
  tagsByNumOfFollowers: [
    {
      id: 'General Programing',
      label: 'GP',
      value: convertToPercent(228.8, totalFollowers),
    },
    {
      id: 'JavaScript',
      label: 'JavaScript',
      value: convertToPercent(100.6, totalFollowers),
    },
    {
      id: 'Nodejs',
      label: 'Nodejs',
      value: convertToPercent(74.3, totalFollowers),
    },
    {
      id: 'React',
      label: 'React',
      value: convertToPercent(74.4, totalFollowers),
    },
    {
      id: 'Python',
      label: 'Python',
      value: convertToPercent(59.5, totalFollowers),
    },
    {
      id: 'CSS',
      label: 'CSS',
      value: convertToPercent(56.6, totalFollowers),
    },
  ],
  mostPopularPostsThisWeek: [
    {
      id: 'JavaScript',
      label: 'JavaScript',
      value: convertToPercent(134, totalMostPopularPosts),
    },
    {
      id: 'Web Dev',
      label: 'Web Dev',
      value: convertToPercent(97, totalMostPopularPosts),
    },
    {
      id: 'React',
      label: 'React',
      value: convertToPercent(60, totalMostPopularPosts),
    },
    {
      id: 'Dev Blogs',
      label: 'Dev Blogs',
      value: convertToPercent(46, totalMostPopularPosts),
    },
    {
      id: 'Python',
      label: 'Python',
      value: convertToPercent(60, totalMostPopularPosts),
    },
    {
      id: 'CSS',
      label: 'CSS',
      value: convertToPercent(37, totalMostPopularPosts),
    },
  ],
}

&, App.tsx

import { useState } from "react";
import styles from '../styles/Home.module.css'
import { data } from "./component/Data";
import { PieChartDemo } from "./component/PieChartDemo";

const App = () => {
  const [selected, setSelected] = useState('tagsByNumOfFollowers')

  return (
    <div>
     <div className={styles.container}>
      <main className={styles.main}>
        <select
          onChange={(e) => {
            setSelected(e.target.value)
          }}
        >
          <option value='tagsByNumOfFollowers'>Tags followed</option>
          <option value='mostPopularPostsThisWeek'>
            Most popular posts this week
          </option>
        </select>
        <PieChartDemo data={data[selected]} />
      </main>
    </div>
    </div>
  );
}

export default App;

I am trying to plot an example nivo pie chart based on the example provided on this link https://dev.to/przpiw/build-data-visualisation-components-with-react-and-nivo-1d7e and github https://github.com/przpiw/Nivo-PieChart-Demo. However, I am trying to formulate the same problem in React Typescript. I am not able to proceed ahead as I am getting an error:

Type '{ tagsByNumOfFollowers: { id: string; label: string; value: string; }[]; mostPopularPostsThisWeek: { id: string; label: string; value: string; }[]; }' is missing the following properties from type 'unknown[]': length, pop, push, concat, and 31 more.ts(2740) types.d.ts(30, 5): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & Omit<PieSvgProps, "width" | "height">' (property) data: unknown[]

I have no clue as to how to proceed ahead.