Chakra UIのmodalが開かない

使用しているバージョン　react18.2.0

Chakra UI/modalを使ってモーダルウィンドウを作成しています
公式ドキュメントのコードを参考に、ボタンだけ自作のコンポーネントに置き換えて実装したのですが
ボタンをクリックしても何も表示されません
コードのどこに間違いがあるのかご指摘いただけないでしょうか

実現したいこと

Chakra UIのmodalを利用してモーダルウィンドウを実装したい

該当のソースコード

Github：https://github.com/yuki96422/react-todo/tree/main/react_todo

TaskList.jsx

import {Heading, VStack, Box} from '@chakra-ui/react';

import TaskCard from '../taskcard/Taskcard';
import AddTaskModal from "../modal/AddTaskModal";


const TaskList = () => {
  return (
    <>
        <Box p={10}>
      <Heading as="h1" color="gray.600" fontSize="32px">
        Task List
      </Heading>

      <VStack spacing="10px" alignItems="start" p="20px">
        <TaskCard />
      </VStack>
    </Box>
    <AddTaskModal />
    </>
  );
};

export default TaskList;

AddTaskModal.jsx

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
} from '@chakra-ui/react';

import MainButton from "../button/MainButton"

import AddTaskButton from '../button/AddTaskButton';

const AddTaskModal = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <AddTaskButton onClick={onOpen} />
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            aaaaaa
          </ModalBody>

          <ModalFooter>
            <MainButton colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </MainButton>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default AddTaskModal;