As part of my react app, I have some setTimeout method to run timer and if that reached zero there is prompt will be pops up, which is working fine as long as the browser in in active state, suppose when we switch between one browser tab to another, I had a issue in delay of execution of this setTimeout intervals, it takes more time to reach zero than the configured one or the initial value that we setting.

Let's say timeoutInterval is 120 seconds as default value, then if we switch another tab this setInterval execution latency issue occured. any solution for this ?

Below is my setInterval method to execute timer.

 const [inactiveTimer, setInactiveTimer] = useState(120);
 useEffect(() => {    
     const inactiveInterval = setInterval(() => {
         if (timeoutInterval > 0) {
             setInactiveTimer(timeoutInterval - 1);
         } else if (timeoutInterval === 0) {
             setShowModal(true);
         }
     }, 1000);
     return () => {
        clearInterval(inactiveInterval);
     };
 }, []);