javascript-React，无法访问在 useEffect() 中传递给 setInterval() 的函数内状态变量的更新值

我正在用React构建一个简单的时钟应用程序。目前countDown()paused当用户点击一个按钮时，情况正好相反。问题是在paused是倒转的，指的是paused里面countDown()函数传递给setInterval()似乎正在访问paused，而不是更新的值。

function Clock(){
  const [sec, setSecs] = useState(sessionLength * 60);
  const [paused, setPaused] = useState(false);
 
  const playPause = () => {
    setPaused(paused => !paused);
  };
  
  const countDown = () => {
    if(!paused){
        setSecs(sec => sec - 1)
      }
  }
  
  useEffect(() => {
    const interval = setInterval(() => {
        countDown();
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

我假设这与调用的异步性质有关setState()在React中，和/或使用正则表达式时作用域/上下文的性质。然而，我无法通过阅读与这些概念相关的文档来确定发生了什么。

我可以想出一些变通办法，让我的应用程序按预期运行。然而，我想了解我目前的方法有什么问题。我希望任何人都能对此有所了解！