Headlessui Disclosure Typescript 错误：'TypeError: close is not a function'

Question

我在尝试在 Disclosure 面板中实现 button 时遇到了这个问题，它应该关闭披露。
根据 Headlessui docs，如果我们想在单击面板的子项时手动关闭披露，我们可以使用 Headlessui 的 close。事实上，它与 react 一起工作得很好，但无法弄清楚如何用打字稿解决它。 单击 panel 中的按钮时会引发此错误：

TypeError: close is not a function

这是代码

import { Disclosure } from "@headlessui/react";

import CloseIcon from "@material-ui/icons/Close";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const App = () => {
  return (
    <Disclosure>
      {() => (
        <div>
          <Disclosure.Button>
            <span>modal</span>
            <ExpandMoreIcon />
          </Disclosure.Button>

          <Disclosure.Panel>
            {({ close }) => (
              <div>
                <button onClick={() => close()}>
                  <CloseIcon />
                </button>

                <div>modal panel</div>
              </div>
            )}
          </Disclosure.Panel>
        </div>
      )}
    </Disclosure>
  );
};

export default App;