typescript - react No overload matches this call

Question

1. I am trying to implement Choropleth(world map) using the Nivo library'.

2. I use Typescript-React and when I added the legends I am getting an error. I am not good at Typescript probably, it is easy one but I could not handle the problem

3. If I change into '.jsx' problem solves but I am using typescript in react project. My error like this:

---

(JSX attribute) legends: {
    anchor: string;
    direction: string;
    justify: boolean;
    translateX: number;
    translateY: number;
    itemsSpacing: number;
    itemWidth: number;
    itemHeight: number;
    itemDirection: string;
    itemTextColor: string;
    itemOpacity: number;
    symbolSize: number;
    effects: {
        ...;
    }[];
}[]
No overload matches this call.
  Overload 1 of 2, '(props: ChoroplethProps | Readonly<ChoroplethProps>): ResponsiveChoropleth', gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
  Overload 2 of 2, '(props: ChoroplethProps, context: any): ResponsiveChoropleth', gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.

My code ıs here:

import mapData from './datas/mapData';
import countries from './datas/world_countries.json';

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const MyResponsiveChoropleth = () => (
  <ResponsiveChoropleth
    data={mapData}
    features={countries.features}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    colors='reds'
    domain={[0, 1000000]}
    unknownColor='#666666'
    label='properties.name'
    valueFormat='.2s'
    projectionTranslation={[0.5, 0.5]}
    projectionRotation={[0, 0, 0]}
    enableGraticule={true}
    graticuleLineColor='#dddddd'
    borderWidth={0.5}
    borderColor='#152538'
    legends={[
      {
        anchor: 'bottom-left',
        direction: 'column',
        justify: true,
        translateX: 80,
        translateY: -57,
        itemsSpacing: 1,
        itemWidth: 85,
        itemHeight: 18,
        itemDirection: 'left-to-right',
        itemTextColor: '#444444',
        itemOpacity: 0.85,
        symbolSize: 16,
        effects: [
          {
            on: 'hover',
            style: {
              itemTextColor: '#000000',
              itemOpacity: 1,
            },
          },
        ],
      },
    ]}
  />
);



export default MyResponsiveChoropleth;