Hi everyone, and thank you for your time, I'm trying to create a little math game and I somehow did something, but it's not perfect yet.
You can check it here: https://mini-games-psi.vercel.app/games/math

Basically a question pops on screen and the user has to input the answer into an input box. After the answer is submitted a new question pops on the screen. There is also a timer.
At the end the user will see the game stats, things like his score, how many questions there were, etc.

The problem is that when the page loads for the first time and the user clicks start, at the and of the first game the number of total questions is n+1 even if the user answers only n questions. But from game2, there is a new problem, the first question answered is skipped in the stats and I don't have any idea where the problem is.

I uploaded the code as an md file where you can see my 3 .tsx files because the code is too long for discord. Any help would be appreciated.

I suspect the problem is in page.tsx in this function:

 const startCountdown = () => {
    setCountdown(3); // 3 sec countdown
    const countdownInterval = setInterval(() => {
      setCountdown((prev) => {
        if (prev === 1) {
          clearInterval(countdownInterval); 
          setStartGame(true); // start the game
          setCountdown(null); // hide countdown
          generateNewGameQuestion(); // generate first question
          return null;
        }
        return prev ? prev - 1 : null; // decrement countdown
      });
    }, 1000);
  };

or here where I reset the game:

const handleStartOrRestartGame = () => {
    //reset everything
    setTimeLeft(15); //15s
    setGameOver(false);
    setScore(0);
    resetStats();
    setAnswer('');
    setStartGame(false); // temporarily stop the game to reset ProgressBar
    startCountdown(); // start countdown before game begins
  };

But I can't figure out what's wrong.