• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

What is expected?

The Area component has no data prop. As you can see in the example, the chart still works when using that prop nevertheless.

What is actually happening?

I want to dynamically show areas in my composed chart. For that I'm splitting up the data and "map" in the render:

Example data

const areas = [
  {
    id: "area1",
    data: [
      { ts: 1, value: 5 },
      { ts: 2, value: 10 }
    ]
  },
  {
    id: "area2",
    data: [
      { ts: 1, value: 9 },
      { ts: 2, value: 16 }
    ]
  }
];

Render

<ComposedChart ...>
  ...
  <XAxis dataKey="ts" type="number" />
  ...
  {areas.map((area) => (
    <Area
      // @ts-ignore
      data={area.data}
      dataKey="value"
      key={area.id}
      ...
    />
  ))}
  ...
</ComposedChart>

This works perfectly fine and the chart renders correctly, but TypeScript says there's no data prop on an Area component (hence the // @ts-ignore in my example).

Is this just a missing type definition or is this somehow working because of other circumstances?

Please see my CodeSandbox for a working example.

This is also the case for earlier versions (v1.8.x).