当单击卡片时，进度条必须随useEffect一起前进。我该怎么做呢？

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

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

  const handleClick = () => {
    setProgress(prevProgress => prevProgress + 10); // 每次点击增加10%
  };

  useEffect(() => {
    // 这里可以根据 progress 的值来更新进度条的显示
    console.log(`Progress: ${progress}%`);
  }, [progress]);

  return (
    <div>
      <div className="card" onClick={handleClick}>
        Click me to increase progress
      </div>
      <div className="progress-bar">
        <div className="progress" style={{ width: `${progress}%` }}></div>
      </div>
    </div>
  );
};

export default ProgressBarComponent;

.card {
  padding: 20px;
  margin: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #eee;
  border-radius: 5px;
}

.progress {
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
}