Toggling audio in React without re-rendering component

Question

I have built a game using React (and Matter JS and p5.js). It mainly has 2 variables, score (increments everytime goal is hit) and timer (decrements every second).
I want music to play in the background if user wants. So I have an audio toggle button. But I have to use a state variable to ensure the audio is playing/pausing as required. Such a state update re-renders the component and thus resets the score and timer variables.

Is there any way to toggle the audio in React without using a state variable, avoiding re-rendering the component, or at least some way for React to know that if it gets re-rendered while in the "/game" page, it shouldn't reset the score and timer?

Here is the part of the code that handles the audio:

            audioButton = p.createImg(audioRef.current.paused ? audioOff : audioOn, "audio button");
            audioButton.position(20, p.height - 50);
            audioButton.size(30, 30);
            audioButton.mouseClicked(() => {
                if (audioRef.current.paused) {
                    audioRef.current.play();
                } else {
                    audioRef.current.pause();
                }
                setPlaying(prevPlaying => !prevPlaying);
                setTimeout(() => {
                    audioButton.elt.src = audioRef.current.paused ? audioOff : audioOn;
                }, 0);
            });

My score and timer are defined as follows:

//GLOBAL VARIABLES
let score = 0;
let timer = 0;

function Game() {  
    score = 0;
    timer = 0;


    /*REST OF THE GAME LOGIC...*/
}

I have already tried making score and timer state variables instead of global variables. There must be some p5.js issue in that case which doesn't update the score and the timer at ALL (they remain as 0 and 42 respectively).

Any help would be appreciated, thanks!