He creado un menú desplegable mapeado, pero no puedo entender cómo abrir/cerrar uno seleccionado. Ya tengo algo como esto.

 {navItems.map(({ id, icon, text}) => ( <Dropdown> <DropdownButton id={id} onClick={() => handleIsOpen(id)}>{text}{icon ? <img src={icon} alt="arrow-down" /> : null}</DropdownButton> <DropdownContent isOpen={isOpen}> <DropdownLink href="#">Link 1</DropdownLink> <DropdownLink href="#">Link 2</DropdownLink> <DropdownLink href="#">Link 3</DropdownLink> </DropdownContent> </Dropdown> ))}

función handleIsOpen

 const [isOpen, setIsOpen] = useState({ 1: false, 2: false, }); const handleIsOpen = (id) => { if (id === 1 || id === 2) { setIsOpen({ [id]: !isOpen[id], }) } else { setIsOpen({ ...isOpen, 3: false, 4: false, }) } }

En realidad, cuando hago clic en el botón, no cambia su estilo.

 export const DropdownContent = styled.div` display: ${({isOpen}) => isOpen ? 'none' : 'block'}; position: absolute; background-color: white; min-width: 128px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; `;