有时Settimeout在使用效果中多次执行

Question

这是我的Settimeout代码在使用效果中，我需要在其中每28分钟派遣操作。为了延迟，我正在使用一个动态值，即从实际API到当前时间和一个时间之间的差异。因此，每次它在指定的时间呈现时都会运行。

const isLogged = useSelector((state) => state.userReducer.loggedIn); // provide boolean value
const intervalId = useRef(null);
const nextRefreshCallValue = localStorage.getItem("nextCall")

useEffect(() => {
  timeoutId.current = setTimeout(() => {
    // To check in between if user is logged out and to stop setTimeout
    if (!isLogged) {
      clearTimeout(timeoutId.current);
      return;
    }
    dispatch(refreshUserToken());
  }, 1000 * moment(currentTime).diff(moment(nextRefreshCallValue))); //it will give diff in milliseconds

  return () => {
    clearTimeout(timeoutId.current)
  }
}, [nextRefreshCallValue, isLogged])

它是按预期运行的，但是有时候，当我在多个浏览器选项卡中运行应用程序时，我可以看到超时在接下来的令牌呼叫（28分钟）之前的多次执行（28分钟），在这里我不使用setInterval，因为我们可以保持动态值每个浏览器选项卡中的新渲染时间。

我的最终要求是 - 所有标签都应同时接听API调用，并且应在28分钟后反复致电。

有人可以指导我在这里犯什么错误，以及如何避免这些情况？