如何使用react钩子制作带点的进度指示器组件？

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

const DottedProgressIndicator = () => {
  const [progress, setProgress] = useState(0);
  const [showIndicator, setShowIndicator] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      {showIndicator && (
        <div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ marginRight: '10px' }}>Progress: {progress}%</div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {[1, 2, 3, 4, 5].map((dot) => (
                <div
                  key={dot}
                  style={{
                    backgroundColor: '#000',
                    borderRadius: '50%',
                    width: '10px',
                    height: '10px',
                    marginRight: '5px',
                    opacity: progress >= dot * 20 ? 1 : 0.3,
                  }}
                />
              ))}
            </div>
          </div>
          <button onClick={() => setShowIndicator(false)}>Hide Indicator</button>
        </div>
      )}
    </div>
  );
};

export default DottedProgressIndicator;