This might be a very common or easy issue to solve, but I'm very new to React (started today) and am not aware of this.

I'm trying to build a simple clicks per second application. Basically, an application that counts how many clicks you do per second. So, when the person starts clicking on the button a timer starts, and at the end, I divide clicks/seconds. The problem is that the timer slows down when I start clicking faster.

Here is a simplified version of my code:

function Clicker() {
  const [clicks, setClicks] = useState(0);
  const [milliSeconds, setMilliSeconds] = useState(0);
  const [storeMilliSeconds, setStoreMilliSeconds] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [startTimer, setStartTimer] = useState(false);

  const clickerHandler = () => {
    setEffect(true);
    setStartTimer(true);
    setClicks(clicks + 1);
  };

  useEffect(() => {
    if (seconds === 10 && milliSeconds === 0) {
      setStartTimer(false);
    }
    if (startTimer === true) {
      const interval = setInterval(() => {
        setMilliSeconds((milliSeconds) => milliSeconds + 1);
        setStoreMilliSeconds((storeMilliSeconds) => storeMilliSeconds + 1);
        if (milliSeconds === 9) {
          setSeconds((seconds) => seconds + 1);
          setMilliSeconds(0);
        }
      }, 100);
      return () => clearInterval(interval);
    }
    return console.log(
      "nothing happening"
    );
  });
  return (
        <button
          onClick={clickerHandler}
        >
          There's only one way to find out...
        </button>

I'm very grateful for the help I can get, thanks!