React counter getting out of sync when tab is not focused

JavaScript
1

I’m building with React a timer that multiple people will see at the same time. I’ve noticed that, once the timer has been opened by two persons on different tabs, if the user looking at the timer changes of tab and comes back, the timer gets out of sync (dragged a few seconds).

Inside the timer component I’m providing a duration prop and I have a secondsToCountdown internal state that gets updated every second with an interval inside the component. The interval is something like this (using hooks btw):

const [secondsToCountdown, setSecondsToCountdown] = useState(duration * 60);

const tick = () => {
    setSecondsToCountdown(secondsToCountdown - 1);  
};

useInterval(
  () => {
    tick();
  },
  running ? 1000 : null
);

I’m guessing that for some reason the interval stops or runs slowly when the component is out of view. Is there a workaround for this? Am I doing something wrong here? Is the only solution just to use something along the lines of the visibilitychange event?