Estoy trabajando en esta barra lateral para un proyecto. Estoy enfrentando un problema.
Comportamiento requerido Si hago clic en una opción que tiene un submenú, se mostrará el submenú debajo de la opción en la que se hizo clic. Y empujará hacia abajo las otras opciones a continuación. por ejemplo, esta barra lateral https://med.stanford.edu/ultrasound/research.html
Comportamiento actual
Si hago clic en una opción, se superpone a las siguientes opciones. ¿Cómo arreglar esto?

Mi componente de barra lateral

 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> ); }