Estoy siguiendo un tutorial para hacer un menú desplegable, pero estoy atascado en el medio porque en lugar de usar la palabra clave "accesorios" como lo hizo el instructor en el tutorial. Pasé los accesorios directamente como argumentos sin punto de accesorios. Cuando quise implementar {open && children} sin accesorios, obtuve el error de que los niños no están definidos

Este es el tutorial que estoy siguiendo, y el minuto en que me sale el error https://youtu.be/IF6k0uZuypA?t=543

Este es el componente NavItem.js donde tengo el problema

 import React, { useState, useEffect } from 'react'; function NavItem({ icon, title, ...props }) { const [opened, setOpened] = useState(false); return ( <li className='nav-item'> <a href='#' target='' className='icon-button' onClick={() => setOpened(!open)} > {icon} <div>{title}</div> </a> {open && children} </li> ); } export default NavItem;

Este es el componente Navbar.js donde llamo al componente NavItem.js

 import React from 'react'; import NavItem from './NavItem'; import BellIcon from './icons/bell.svg'; import { ReactComponent as MessengerIcon } from './icons/messenger.svg'; import { ReactComponent as CaretIcon } from './icons/caret.svg'; import { ReactComponent as PlusIcon } from './icons/plus.svg'; import { ReactComponent as ChevronIcon } from './icons/chevron.svg'; function Navbar() { return ( <> <nav className='h-20 bg-[#242526] py-0 px-4 border-b border-[#474a4d] '> <ul className='max-w-full h-full flex justify-end'> <NavItem icon={<PlusIcon />} /> <NavItem icon={<BellIcon />} /> <NavItem icon={<MessengerIcon />} /> <NavItem icon={<CaretIcon />}> {/* Here where to render The dropdown menu Items */} </NavItem> </ul> </nav> </> ); } export default Navbar;

Estoy usando Tailwindcss para diseñar Gracias por su ayuda