title: React Chakra UI modal only shows overlay
body: <p>I'm using Chakra UI in React with Typescript and having such a weird issue I trying to implement Modal with the following code in modal.tsx file.</p>
  <pre><code>import {
    useDisclosure,
    Button,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalCloseButton,
    ModalBody,
    ModalFooter,
  } from &quot;@chakra-ui/react&quot;;
  
  export default function CustomModal() {
    const { isOpen, onOpen, onClose } = useDisclosure();
  
    return (
      &lt;&gt;
        &lt;Button onClick={onOpen}&gt;Open Modal&lt;/Button&gt;
  
        &lt;Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}&gt;
          &lt;ModalOverlay /&gt;
          &lt;ModalContent&gt;
            &lt;ModalHeader&gt;Create your account&lt;/ModalHeader&gt;
            &lt;ModalCloseButton /&gt;
            &lt;ModalBody pb={6}&gt;&lt;/ModalBody&gt;
  
            &lt;ModalFooter&gt;
              &lt;Button colorScheme=&quot;blue&quot; mr={3}&gt;
                Save
              &lt;/Button&gt;
              &lt;Button onClick={onClose}&gt;Cancel&lt;/Button&gt;
            &lt;/ModalFooter&gt;
          &lt;/ModalContent&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>once i click on Open Modal button it simply shows the overlay without actual content of the modal.</p>