title: Chakra UI : The background does not dim when the drawer opens
body: <p>This is the first time I am using chakra UI for my project. I am following the documentation to implement the UI. The drawer example mentioned in the <a href="https://chakra-ui.com/docs/overlay/drawer" rel="nofollow noreferrer">documentation</a> works perfectly. But when I try to use the same for my project the background does not dim.</p>
  <p>Here is the screenshot of the same.
  <a href="https://i.stack.imgur.com/Osfyd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Osfyd.png" alt="screenshot" /></a></p>
  <p>Below is the code for the same.</p>
  <p>Filename: <strong>Campaigns.js</strong><br />
  The drawer component is at the end of the file (CreateCampaign)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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";
      
  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) =&gt; {
          const { icon, children, ...rest } = props;
          return (
            &lt;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}
            &gt;
              {icon &amp;&amp; (
                &lt;Icon
                  mr="2"
                  boxSize="4"
                  as={icon}
                /&gt;
              )}
              {children}
            &lt;/Flex&gt;
          );
        };
      
        const SidebarContent = (props) =&gt; (
          &lt;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}
          &gt;
            &lt;Flex px="4" py="5" align="center"&gt;
              &lt;Text
                fontSize="2xl"
                ml="2"
                color={useColorModeValue("brand.500", "white")}
                fontWeight="semibold"
              &gt;
                cffp
              &lt;/Text&gt;
            &lt;/Flex&gt;
            &lt;Flex
              direction="column"
              as="nav"
              fontSize="sm"
              color="gray.600"
              aria-label="Main Navigation"
            &gt;
              &lt;NavItem icon={MdHome}&gt;Home&lt;/NavItem&gt;
              &lt;NavItem icon={FaRss}&gt;Articles&lt;/NavItem&gt;
              &lt;NavItem icon={HiCollection}&gt;Collections&lt;/NavItem&gt;
              &lt;NavItem icon={FaClipboardCheck}&gt;Checklists&lt;/NavItem&gt;
              &lt;NavItem icon={HiCode} onClick={integrations.onToggle}&gt;
                Integrations
                &lt;Icon
                  as={MdKeyboardArrowRight}
                  ml="auto"
                  transform={integrations.isOpen &amp;&amp; "rotate(90deg)"}
                /&gt;
              &lt;/NavItem&gt;
              &lt;Collapse in={integrations.isOpen}&gt;
                &lt;NavItem pl="12" py="2"&gt;
                  Shopify
                &lt;/NavItem&gt;
                &lt;NavItem pl="12" py="2"&gt;
                  Slack
                &lt;/NavItem&gt;
                &lt;NavItem pl="12" py="2"&gt;
                  Zapier
                &lt;/NavItem&gt;
              &lt;/Collapse&gt;
              &lt;NavItem icon={AiFillGift}&gt;Changelog&lt;/NavItem&gt;
              &lt;NavItem icon={BsGearFill}&gt;Settings&lt;/NavItem&gt;
            &lt;/Flex&gt;
          &lt;/Box&gt;
        );
        return (
          &lt;&gt;
          &lt;Box
            as="section"
            bg={useColorModeValue("gray.50", "gray.700")}
            minH="100vh"
          &gt;
            &lt;SidebarContent display={{ base: "none", md: "unset" }} /&gt;
            &lt;Drawer
              isOpen={sidebar.isOpen}
              onClose={sidebar.onClose}
              placement="left"
            &gt;
              &lt;DrawerOverlay /&gt;
              &lt;DrawerContent&gt;
                &lt;SidebarContent w="full" borderRight="none" /&gt;
              &lt;/DrawerContent&gt;
            &lt;/Drawer&gt;
            &lt;Box ml={{ base: 0, md: 60 }} transition=".3s ease"&gt;
              &lt;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"
              &gt;
                &lt;IconButton
                  aria-label="Menu"
                  display={{ base: "inline-flex", md: "none" }}
                  onClick={sidebar.onOpen}
                  icon={&lt;FiMenu /&gt;}
                  size="sm"
                /&gt;
                &lt;InputGroup w="96" display={{ base: "none", md: "flex" }}&gt;
                  &lt;InputLeftElement color="gray.500" children={&lt;FiSearch /&gt;} /&gt;
                  &lt;Input placeholder="Search for articles..." /&gt;
                &lt;/InputGroup&gt;
      
                &lt;Flex align="center"&gt;
                  &lt;Button 
                    colorScheme="brand" 
                    size="sm" 
                    mr={[1,1,3]}
                    onClick={onOpen}
                    ref={btnRef}
                  &gt; 
                    Create &lt;AddIcon ml={[1,1,2]} /&gt; 
                  &lt;/Button&gt;
                  &lt;Avatar
                    mr="4"
                    size="sm"
                    name="anubra266"
                    src="https://avatars.githubusercontent.com/u/30869823?v=4"
                    cursor="pointer"
                  /&gt;
                  &lt;Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/&gt;
                &lt;/Flex&gt;
              &lt;/Flex&gt;
      
              &lt;Box as="main" p="4"&gt;
                &lt;Switch&gt;
                      &lt;Route path={path} exact&gt;
                      &lt;Campaigns /&gt;
                      &lt;/Route&gt;
                      &lt;Route path={`${path}/new`}&gt;
                          &lt;DonationBasedForm /&gt;
                      &lt;/Route&gt;
                &lt;/Switch&gt;
              &lt;/Box&gt;
            &lt;/Box&gt;
          &lt;/Box&gt;
          &lt;CreateCampaign onClose={onClose} isOpen={isOpen} btnRef={btnRef}/&gt;
          &lt;/&gt;
        );
      }</code></pre>
  </div>
  </div>
  </p>
  <p>Filename : CreateCampaigns.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import {
      Drawer,
      DrawerContent,
      DrawerCloseButton,
      DrawerFooter,
      DrawerBody,
      DrawerHeader,
      Stack,
      Box,
      FormLabel,
      InputGroup,
      Input,
      InputLeftAddon,
      InputRightAddon,
      Textarea,
      Button,
      Select
  } from '@chakra-ui/react';
  
  const CreateCampaign = (props) =&gt; {
      return (
          &lt;Drawer
              isOpen={props.isOpen}
              placement="right"
              onClose={props.onClose}
              size="xl"
          &gt;
              &lt;DrawerContent&gt;
              &lt;DrawerCloseButton /&gt;
              &lt;DrawerHeader borderBottomWidth="1px"&gt;
                  Create a new account
              &lt;/DrawerHeader&gt;
  
              &lt;DrawerBody&gt;
                  &lt;Stack spacing="24px"&gt;
                  &lt;Box&gt;
                      &lt;FormLabel htmlFor="username"&gt;Name&lt;/FormLabel&gt;
                      &lt;Input
                      id="username"
                      placeholder="Please enter user name"
                      /&gt;
                  &lt;/Box&gt;
  
                  &lt;Box&gt;
                      &lt;FormLabel htmlFor="url"&gt;Url&lt;/FormLabel&gt;
                      &lt;InputGroup&gt;
                      &lt;InputLeftAddon&gt;http://&lt;/InputLeftAddon&gt;
                      &lt;Input
                          type="url"
                          id="url"
                          placeholder="Please enter domain"
                      /&gt;
                      &lt;InputRightAddon&gt;.com&lt;/InputRightAddon&gt;
                      &lt;/InputGroup&gt;
                  &lt;/Box&gt;
  
                  &lt;Box&gt;
                      &lt;FormLabel htmlFor="owner"&gt;Select Owner&lt;/FormLabel&gt;
                      &lt;Select id="owner" defaultValue="segun"&gt;
                      &lt;option value="segun"&gt;Segun Adebayo&lt;/option&gt;
                      &lt;option value="kola"&gt;Kola Tioluwani&lt;/option&gt;
                      &lt;/Select&gt;
                  &lt;/Box&gt;
  
                  &lt;Box&gt;
                      &lt;FormLabel htmlFor="desc"&gt;Description&lt;/FormLabel&gt;
                      &lt;Textarea id="desc" /&gt;
                  &lt;/Box&gt;
                  &lt;/Stack&gt;
              &lt;/DrawerBody&gt;
  
              &lt;DrawerFooter borderTopWidth="1px"&gt;
                  &lt;Button variant="outline" mr={3} onClick={props.onClose}&gt;
                  Cancel
                  &lt;/Button&gt;
                  &lt;Button colorScheme="blue"&gt;Submit&lt;/Button&gt;
              &lt;/DrawerFooter&gt;
              &lt;/DrawerContent&gt;
          &lt;/Drawer&gt;
      )
  }
  
  export default CreateCampaign;</code></pre>
  </div>
  </div>
  </p>