Fix custom Pie animation bug

[ForestLinSen]

Description

This PR is for the issue with PieChart that custom animations do not work when isAnimationActive is set to true

Related Issue

Enable CSS transition for sectors on hover in PieChart with isAnimationActive as true

Motivation and Context

After digging into the code, I found that the key in the Animate component causes the problem. The dynamic key triggers the process of remounting the component, which overrides the custom animation. It also adds rendering burden: if a user sets the mouse hover animation, every time the user hovers over one piece of the pie chart, the entire pie chart will re-render.

How Has This Been Tested?

Tested locally

Screenshots (if appropriate):

piechart.mp4

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• I have added a storybook story or extended an existing story to show my changes

[ckifer]

does this not cause duplicate key errors? https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L285C50-L285C64

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.52%. Comparing base (10ede6f) to head (d6fe189).

Additional details and impacted files

@@            Coverage Diff             @@
##              3.x    #4528      +/-   ##
==========================================
- Coverage   95.52%   95.52%   -0.01%     
==========================================
  Files         116      116              
  Lines       22101    22100       -1     
  Branches     3045     3045              
==========================================
- Hits        21113    21112       -1     
  Misses        982      982              
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ForestLinSen]

does this not cause duplicate key errors? https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L285C50-L285C64

it didn't cause key errors - from my understanding unique key is the requirement for the child in a list; key for Animate here is more like a way to manage the component lifecycle, which causes some troubles in this case

[ckifer]

It's still being used to render a list in the code I linked there. Those don't need keys?

[ForestLinSen]

have a quick look at the code, correct me if I'm wrong - seems that it just wraps all the children in a <div> and there's no dynamic list being generated there?

[ckifer]

From the react docs

If you return an element or an array of elements with keys from fn, the returned elements’ keys will be automatically combined with the key of the corresponding original item from children. When you return multiple elements from fn in an array, their keys only need to be unique locally amongst each other.

So I think this uses the keys from the original children and we shouldn't need to worry about it, cool!