react hooks useState值为什么没有生效？

今天在工作中遇到一个react hooks问题，虽然解决了但是对于其中的原因不太理解，这里发出来和大家一起讨论一下。具体代码如下，场景步骤如下：

1. 点击一次，执行running后，isPolling设为true，并触发polling的useEffect
2. 快速再点击一次，执行running，因为running前执行了cancle，所以这时候running内的isPolling应该是false，但实际还是true

看了一些批量更新的知识，好像解释不了这种现象。大家有什么看法吗？

import { useCallback, useEffect, useState } from "react";

export default function MyApp() {
  const [isPolling, setIsPolling] = useState(false);
  const [pollingCount, setPollingCount] = useState(0);
  const [timer, setTimer] = useState();

  const handleClick = () => {
    cancle();
    running();
  };

  useEffect(() => {
    if (isPolling && pollingCount <= 3) {
      console.log("33");
      clearTimeout(timer);
      setTimer(
        setTimeout(() => {
          console.log("44");
          running();
        }, 1000)
      );
    }
  }, [isPolling, pollingCount]);

  const running = useCallback(() => {
    console.log("running11:", isPolling, pollingCount);

    if (!isPolling) {
      console.log("11");
      setIsPolling(true);
    } else if (isPolling) {
      console.log("22");
      setPollingCount(pollingCount + 1);
    }
  }, [isPolling, pollingCount]);

  const cancle = () => {
    setIsPolling(false);
    setPollingCount(0);
  };

  return (
    <div>
      <div onClick={handleClick}>点击</div>
    </div>
  );
}

执行结果如下