如何在此React循环进度栏上使用动画设置自定义值？

npm install react-transition-group

yarn add react-transition-group

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const ProgressBar = () => {
  const [value, setValue] = useState(0);

  // 自定义函数，用于更新进度值
  const updateValue = () => {
    // 在这里更新进度值的逻辑
    // 可以通过定时器、事件监听等方式来更新进度值
    // 这里只是一个示例，每隔1秒增加10%的进度
    setTimeout(() => {
      setValue(prevValue => prevValue + 10);
    }, 1000);
  };

  return (
    <div>
      <button onClick={updateValue}>开始</button>
      <CSSTransition
        in={value < 100} // 控制进度条是否显示
        timeout={300} // 动画过渡时间
        classNames="progress"
        unmountOnExit
      >
        <div className="progress-bar" style={{ width: `${value}%` }}></div>
      </CSSTransition>
    </div>
  );
};

.progress-bar {
  height: 20px;
  background-color: blue;
  transition: width 0.3s ease-in-out;
}

.progress-enter {
  width: 0;
}

.progress-enter-active {
  width: 100%;
}

.progress-exit {
  width: 100%;
}

.progress-exit-active {
  width: 0;
}

const App = () => {
  return (
    <div>
      <ProgressBar />
    </div>
  );
};