Chakra UI - "Open Modal" button cannot be clicked multiple times

Question

Chakra UI modal dialog in Next.js is not working properly.
I am trying to implement the following code in pages/index.tsx to display a modal dialog.

import type { NextPage } from "next";

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

const Home: NextPage = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>text</ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default Home;

However, once I click the "Open Modal" button, I cannot click it again.
This code was adapted from the official documentation.

Answer 1

I have updated the npm package and this problem has been resolved.

npm install -g npm-check-updates
ncu
ncu -u
npm install