Как в библиотеке Recharts сделать плавность изменения радиуса сектора в Pie графике?

Question

[Павел Орловский]

Использую библиотеку Recharts. Хочу при наведение на каждый сектор в Pie chart'e сделать анимацию(transition) при изменении радиуса сектора. Сейчас радиус меняется резко. Подскажите как это сделать пожалуйста.

const renderActiveShape = (props: any) => {
  const {
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    fill,
    payload,
    percent,
    value,
  } = props;

  return (
    <g>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius +5}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
        opacity={0.9}
      />
    </g>
  );
};

const Home: React.FC = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const onPieEnter = (_: undefined, index: number) => {
    setActiveIndex(index);
  };
  return (
    <section className={classNames("page__home", "home")}>
      <div className="home__container">
        <div className="home__body">
          <PieChart width={800} height={400}>
            <Pie
              activeIndex={activeIndex}
              activeShape={renderActiveShape}
              data={SparklineAreaData}
              cx={120}
              cy={200}
              innerRadius={40}
              outerRadius={80}
              fill="#8884d8"
              dataKey="yval"
              onMouseEnter={onPieEnter}
            >
              {SparklineAreaData.map((entry, index) => (
                <Cell
                  key={`cell-${index}`}
                  fill={COLORS[index % COLORS.length]}
                  cursor="pointer"
                />
              ))}
            </Pie>

            <Pie
              data={SparklineAreaData}
              cx={420}
              cy={200}
              startAngle={180}
              endAngle={90}
              innerRadius={60}
              outerRadius={80}
              fill="#8884d8"
              paddingAngle={5}
              dataKey="yval"
            >
              {data.map((entry, index) => (
                <Cell
                  key={`cell-${index}`}
                  fill={COLORS[index % COLORS.length]}
                />
              ))}
            </Pie>
            <Tooltip />
          </PieChart>
        </div>
      </div>
    </section>
  );
};

export default Home;