React如何禁用按钮并在事件处理完后启用按钮？

我想用React 18实现一个按钮组件，在点击时将按钮禁用，处理完事件后自动按钮启用。我想这是一个很简单的功能，初始代码如下：

import React, { useState } from "react";

export function Button(props: any) {
  const { children, ...properties } = props;
  const clickEvent: React.MouseEventHandler<HTMLButtonElement> = props.onClick;

  const [loading, setLoading] = useState(false);

  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    setLoading(true);
    clickEvent(event);
    setLoading(false);
  }

  return (
    <button disabled={loading} onClick={handleClick}>
      {children}
    </button>
  );
}

并在调用方写了一个耗时的事件来测试：

import { Button } from "./button";

function App() {
  return (
    <div>
      <Button
        onClick={() => {
          for (let index = 0; index < 1000; index++) {
            console.log("handling...");
          }
        }}
      >
        按钮
      </Button>
    </div>
  );
}

预料中调用了 setLoading(true) 后重绘，按钮被禁用，处理事件完后调用 setLoading(false) 后重绘，按钮被启用。
但是不起效果，点击后按钮没有被禁用，但是控制台一直有 handling... 输出。
我在网上搜索后，了解到 react 18 会合并 useState 的更新，所以要用 flushSync 包起来，我改为了以下写法：

 function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
     flushSync(() => setLoading(true));
    console.log(loading);
    clickEvent(event);
    flushSync(() => setLoading(false));
    console.log(loading);
}

但是仍然没有效果，甚至是里面两个 log 输出都是 false，flushSync没有起到立即更新 DOM 的效果。在事件执行完后，我在 F12 里看到按钮元素迅速地出现了 disabled 又迅速地消失了。仍然没有预期的效果。
我猜想可能是因为我传进的 for 循环阻塞了，所以尝试了以下的写法，将 for 循环放进队列里以免阻塞：

  async function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    flushSync(() => setLoading(true));
    console.log(loading);
    await new Promise<void>((resovle) => {
      clickEvent(event);
      flushSync(() => setLoading(false));
      console.log(loading);
      resovle();
    });
  }

仍然是一样的效果，不起作用，在 F12 里看到按钮元素在 for 循环执行完后，迅速地出现了 disabled 属性，又迅速地消失了。
已经无计可施了，网络上也找不到答案。
能帮我解答下吗？