Как сделать hover более плавным в этом примере (recharts - pie chart)?

Если убрать тег, transition style будет работать. Но надо обернуть сектор и текст в одну группу.

  const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180;
  const {
    cx,
    cy,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    midAngle,
    payload,
  } = props;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius / 12) * cos;
  const sy = cy + (outerRadius / 12) * sin;
  return (
    <g style={{ transition: "1s !important" }}>
      <text
        className={styles.pieChartText}
        x={cx}
        y={cy}
        dy={8}
        textAnchor="middle"
        fill={"black"}
        style={{ transition: "1s !important" }}
      >
        {payload.value}%
      </text>
      <Sector
        cx={sx}
        cy={sy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={payload.hoverFill}
        style={{ transition: "1s !important" }}
        animationBegin={0}
      />
    </g>
  );
};

export default function App() {
  const [activeIndex, setActiveIndex] = useState(null);

  const onMouseOver = useCallback((data, index) => {
    setActiveIndex(index);
  }, []);

  const onMouseLeave = useCallback((data, index) => {
    setActiveIndex(null);
  }, []);

  useEffect(() => {
    setTimeout(() => {
      setActiveIndex(0);
    }, 2200);
  }, []);

  return (
    // <div style={{ width: "100%", height: 300 }}>
    <ResponsiveContainer width="100%" height={"100%"}>
      <PieChart>
        <Legend verticalAlign="bottom" align="center" />
        <Pie
          activeIndex={activeIndex}
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius={"85%"}
          innerRadius={"50%"}
          fill="#8884d8"
          activeShape={renderActiveShape}
          onMouseOver={onMouseOver}
          onMouseLeave={onMouseLeave}
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.fill} />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
    // </div>
  );
}