在React中更新自定义progressCircle时出现问题

import React, { useState, useEffect } from 'react';

function ProgressCircle({ percentage }) {
  const [progress, setProgress] = useState(percentage);

  useEffect(() => {
    setProgress(percentage);
  }, [percentage]);

  return (
    <div className="progress-circle">
      <svg>
        <circle r="50" cx="50" cy="50" fill="none" strokeWidth="10">
          <animate
            attributeName="stroke-dasharray"
            dur="1s"
            from={`0, 314.16`}
            to={`${progress * 3.1416}, 314.16`}
            repeatCount="indefinite"
          />
        </circle>
      </svg>
      <div className="percentage">{progress}%</div>
    </div>
  );
}

export default ProgressCircle;

import React, { useState, useEffect, memo } from 'react';

const MemoizedProgressCircle = memo(ProgressCircle);

function App() {
  const [percentage, setPercentage] = useState(0);

  // 模拟进度更新
  useEffect(() => {
    const interval = setInterval(() => {
      setPercentage((prev) => (prev + 1) % 101);
    }, 100);
    return () => clearInterval(interval);
  }, []);

  return <MemoizedProgressCircle percentage={percentage} />;
}

export default App;