Yamada Uiでmodalが開かない

'use client'
import { Modal as ModalComponent, ModalBody, ModalFooter, ModalHeader,Button} from "@yamada-ui/react";
import { useDisclosure } from "@yamada-ui/react"
import React  from "react"

export default function Hoge() {
    const {isOpen,onOpen,onClose} = useDisclosure();
    return(
        <>
        <Button onClick={onOpen}>Open Modal</Button>
        <ModalComponent isOpen={isOpen} onClose={onClose}>
        <ModalBody></ModalBody>
        <ModalHeader >投稿</ModalHeader> 
        <ModalFooter padding="5%"></ModalFooter>         
        </ModalComponent>
    </>
    )
}

### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
console.log("isOpen:", isOpen); // isOpenの値を確認 

でisOpenの値を見たが、isOpen: falseであった。