React reseting a global variable back to zero doesn't reset a setinterval back to zero - reset a setINterval in another function scope somehow

Question

I have a React project, where I have a setInterval function that counts and a button that counts clicks within that timer. After a certain period of time, I want to start subtracting points in the counter button isn't clicked.

My idea is to use a global variable and reset it to zero so that the timer starts back at zero. The code is below:

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

function ScoreCard() {

  const [strokeScore, setStrokeScore] = useState(1);

  const [strokeCountdown, setStrokeCountdown] = useState();

  const [strokeButtonClickedRecently, setStrokeButtonClickedRecently] = useState(false);

  const strokeCountdownDing = new Audio('/sounds/round-complete.mp3');

  let strokeCountdownTimepassed;

  const addToStrokeScore = () => {
    strokeCountdownTimepassed = 0;
    console.log(strokeCountdownTimepassed)
    setStrokeScore(strokeScore + 1);
    if (strokeCountdown === 0) {
        strokeCountdownDing.play();
        document.getElementById('stroke-counter-button').disabled = true;
    }
  }

  const subtractStrokeScore = () => {
    setStrokeScore(strokeScore - 1);
  }

  const countDown = () => {
    let strokeCountdown = Math.floor(Math.random() * 31) + 50;
    let strokeCountdownTimepassed = 0;
    let strokeCountdownSpeedOptions = [1000, 500, 300, 200];
    let strokeCountDownSpeed = strokeCountdownSpeedOptions[Math.floor(Math.random()*strokeCountdownSpeedOptions.length)];
    let strokeCounter = setInterval(() => {
        strokeCountdown--
        strokeCountdownTimepassed++
        console.log(strokeCountdownTimepassed)
        setStrokeCountdown(strokeCountdown)
        if (strokeCountdown === 0) {
            clearInterval(strokeCounter)
        }
    }, strokeCountDownSpeed)
  }

  useEffect(() => {
    countDown();
  }, []);

  return (
    <div className="game__score-card">
      <div className="game__speed-level">
          Speed: idk
      </div>
      <div className="game__stroke-countdown">
          Countdown: {strokeCountdown}
      </div>
      <p>Score: {strokeScore}</p>
      <button id="stroke-counter-button" onClick={addToStrokeScore}>
          {strokeCountdown === 0 ? 'Game Over' : 'Stroke'}
      </button>
      <div className="game__total-score">
          Total score: idk
      </div>
    </div>
  );
}

export default ScoreCard;

My expectation of the console.log(strokeCountdownTimepassed) output after click is when it's clicked, it shows zero and counts from zero, but what happened is the click logs zero and it starts back off where it started..

How do I change this so that it starts back at zero in the setInterval?

Basically what I want to do is this

const countDown = () => {
    let strokeCountdown = Math.floor(Math.random() * 31) + 50;
    let strokeCountdownTimepassed = 0;
    let strokeCountdownSpeedOptions = [1000, 500, 300, 200];
    let strokeCountDownSpeed = strokeCountdownSpeedOptions[Math.floor(Math.random()*strokeCountdownSpeedOptions.length)];
    let strokeCounter = setInterval(() => {
        strokeCountdown--
        strokeCountdownTimepassed++
        console.log(strokeCountdownTimepassed)
        setStrokeCountdown(strokeCountdown)
        if(strokeCountdownTimepassed > 4) {
            setStrokeScore(strokeScore - 1);
        }
        if (strokeCountdown === 0) {
            clearInterval(strokeCounter)
        }
    }, strokeCountDownSpeed)
  }

If I could reset it back to zero and have it count from zero.