I am working on this sidebar for a project. I am facing a problem.
Required Behavior If I click on an option which has a submenu, it will show the submenu below the clicked option. And it will push down the other options below. e.g this sidebar https://med.stanford.edu/ultrasound/research.html
Current Behavior
If I click on an option, it overlaps the below options. How to fix this?

My sidebar Component

import { useState } from "react";
import { Box, Text } from "@chakra-ui/react";
import sidebarItems from "./sidebarItems";


export default function Sidebar() {
  const [selectedSubMenu, setSelectedSubMenu] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = (title) => {
    setSelectedSubMenu(title);
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <Box>
        {sidebarItems.map((items) => {
          return (
            <Box
              width='200px'
              height='40px'
              textAlign='start'
              cursor='pointer'
              onClick={() => handleClick(items.title)}
              fontFamily='Fjord One'
              boxShadow='lg'
              _hover={{
                bgColor: "#1a2963",
                color: "white",
              }}
            >
              <Text fontSize='xl' as='bold'>
                {items.title}
              </Text>
              {isOpen && items.title === selectedSubMenu
                ? items.subMenu?.map((item) => {
                    return (
                      <Box
                        bgColor='#e4e8e5'
                        boxShadow='md'
                        textAlign='start'
                        width='200px'
                        height='40px'
                      >
                        <Text fontFamily='Fjord One' fontSize='xl'>
                          {item.title}{" "}
                        </Text>
                      </Box>
                    );
                  })
                : null}
            </Box>
          );
        })}
      </Box>
    </div>
  );
}