如何在react本机中停止，直到进度条完成

import React, { useState } from 'react';

const ProgressBar = () => {
  const [progress, setProgress] = useState(0);

  return (
    <div>
      <div className="progress-bar" style={{ width: `${progress}%` }}></div>
    </div>
  );
};

export default ProgressBar;

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

const ProgressBar = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setProgress(progress + 10);
    }, 1000);

    return () => clearTimeout(timer);
  }, [progress]);

  return (
    <div>
      <div className="progress-bar" style={{ width: `${progress}%` }}></div>
    </div>
  );
};

export default ProgressBar;

import React from 'react';
import ProgressBar from './ProgressBar';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <ProgressBar />
      <p>Other content...</p>
    </div>
  );
};

export default App;