Prevent re-render with expensive timer - reactjs

Question

I need a timer in one of my main screens, which has to run every 10ms (which is really expensive, I know. It has to play a sound for a certain cadence).
I tried to use a custom hook to extract the time from the screen like so:
import { useEffect, useState } from "react";
// constants
const PLAYER_INTERVAL = 10;
const useStepSoundInterval = (
receivedCadence: number,
handleSound: () => void,
) => {
const [playerTimeCount, setPlayerTimeCount] = useState(0);
const [playerTimerStep, setPlayerTimerStep] = useState(0);
let timerSound: NodeJS.Timeout;
useEffect(() => {
timerSound = setInterval(handleStepSoundInterval, PLAYER_INTERVAL);
return () => {
clearInterval(timerSound);
setPlayerTimeCount(0);
setPlayerTimerStep(0);
};
}, []);
useEffect(() => {
if (receivedCadence) {
setPlayerTimerStep((playerTimerStep) => playerTimerStep + 0.1);
if (1 / receivedCadence * PLAYER_INTERVAL <= playerTimerStep) {
setPlayerTimerStep(0);
handleSound();
}
}
}, [receivedCadence, playerTimeCount]);
const handleStepSoundInterval = () => {
setPlayerTimeCount((playerTimeCount) => playerTimeCount + 1);
};
};
export default useStepSoundInterval;
Then I call it like that on my screen:
useStepSoundInterval(
receivedCadence,
handleSound,
);
I thought, if I extract it, as a hook, from the screen, it would prevent to re-render the JSX all the time, but it does re-render every 10ms, which is a tiny bit expensive :)
Can I somehow use React.Memo? I failed to implement it.