Chakra UI Modal not working as it is supposed to - reactjs

Question

I was following the documentation of chakra UI. Here is the documentation of chakra ui. But it is not working as it is supposed to do whenever I trigger the hook the screen goes blank.
Below is the code sample. The modal is placed at the end of the file.
DialogModal Component which is imported from DialogModal.js file
import React from "react";
import {
Avatar,
Box,
Collapse,
DrawerContent,
DrawerOverlay,
Flex,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
Text,
useColorModeValue,
useDisclosure,
useColorMode,
Button,
Drawer,
} from "#chakra-ui/react";
import {AddIcon} from '#chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';
import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
import DialogModal from "../../components/Modal/DialogModal";
import DonationBasedCampaigns from "../DonationBasedCampaigns/DonationBasedCampaigns";
export default function Swibc() {
const sidebar = useDisclosure();
const integrations = useDisclosure();
// Create campaign drawer hooks
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
let { path, url } = useRouteMatch();
const { toggleColorMode: toggleMode } = useColorMode();
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
const NavItem = (props) => {
const { icon, children, ...rest } = props;
return (
<Flex
align="center"
px="4"
pl="4"
py="3"
cursor="pointer"
color={useColorModeValue("inherit", "gray.400")}
_hover={{
bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"),
}}
role="group"
fontWeight="semibold"
transition=".15s ease"
{...rest}
>
{icon && (
<Icon
mr="2"
boxSize="4"
as={icon}
/>
)}
{children}
</Flex>
);
};
const SidebarContent = (props) => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
cffp
</Text>
</Flex>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<NavItem icon={MdHome}>Home</NavItem>
<NavItem icon={FaRss}>Articles</NavItem>
<NavItem icon={HiCollection}>Collections</NavItem>
<NavItem icon={FaClipboardCheck}>Checklists</NavItem>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Integrations
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<NavItem pl="12" py="2">
Shopify
</NavItem>
<NavItem pl="12" py="2">
Slack
</NavItem>
<NavItem pl="12" py="2">
Zapier
</NavItem>
</Collapse>
<NavItem icon={AiFillGift}>Changelog</NavItem>
<NavItem icon={BsGearFill}>Settings</NavItem>
</Flex>
</Box>
);
return (
<>
<Box
as="section"
bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh"
>
<SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer
isOpen={sidebar.isOpen}
onClose={sidebar.onClose}
placement="left"
>
<DrawerOverlay />
<DrawerContent>
<SidebarContent w="full" borderRight="none" />
</DrawerContent>
</Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex
as="header"
align="center"
justify="space-between"
w="full"
px="4"
bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")}
h="14"
>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<InputGroup w="96" display={{ base: "none", md: "flex" }}>
<InputLeftElement color="gray.500" children={<FiSearch />} />
<Input placeholder="Search for articles..." />
</InputGroup>
<Flex align="center">
<Button
colorScheme="brand"
size="sm"
mr={[1,1,3]}
onClick={onOpen}
ref={btnRef}
>
Create <AddIcon ml={[1,1,2]} />
</Button>
// MODAL
<DialogModal />
<Avatar
mr="4"
size="sm"
name="anubra266"
src="https://avatars.githubusercontent.com/u/30869823?v=4"
cursor="pointer"
/>
<Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
</Flex>
</Flex>
</>
);
}
The DialogModal File :
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
Lorem,
useDisclosure
} from "#chakra-ui/react"
const DialogModal = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
)
}
export default DialogModal;

Answer 1

In my case, I was not wrapping the whole component with ChakraProvider because of which the Modal was opening in some weird way.
<ChakraProvider>{...your_component}</ChakraProvider>

Answer 2

The issue went away when I removed Lorem Tag from the modal.
const DialogModal = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* <Lorem count={2} /> */}
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
)
}