VictoryAnimation and VictoryTransition cannot be used as a JSX component.

[brett-baker-dev]

Hello, everyone.

<VictoryStack>
    {cumulativeFlowAggregatedData.map((object, index) => (
        <VictoryAnimation key={index} duration={1000}>
            {() => (
                <VictoryArea
                    domain={{ y: [0, maximumY + 5] }} // pad the maximum Y value to give a little breathing room at the top of the chart
                    key={object.title}
                    interpolation="monotoneX"
                    data={object.data}
                    style={{
                      data: {
                        fill: `${object.color}`,
                        fillOpacity: 0.7,
                        stroke: `${object.color}`,
                        strokeWidth: 2,
                      },
                    }}
                    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, bottom: 5 }} />}
                    animate={{ duration: 1000 }}
                />
            )}
        </VictoryAnimation>
    ))}
</VictoryStack>

In the code above I am not able to use the VictoryAnimation with this error.

'VictoryAnimation' cannot be used as a JSX component.
  Its type 'typeof VictoryAnimation' is not a valid JSX element type.
    Type 'typeof VictoryAnimation' is not assignable to type 'new (props: any) => Component<any, any, any>'.
      Types of construct signatures are incompatible.
        Type 'new (props: any, context: any) => VictoryAnimation' is not assignable to type 'new (props: any) => Component<any, any, any>'.
          Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2786)

Any ideas to solve this issue?

Thank you.