Tengo el elemento principal Distribuidor/Personal y tres hijos internos cuando hago clic en los hijos internos (Distribuidores/Personal, Departamento, Designación) todos los hijos internos se expandieron y no quiero. Quiero que solo esos elementos cambien cuando hago clic en él

 function SideBarItem({ title, icon, link, children }) { const [showChildren, setShowChildren] = useState(false); const [showInnerChildren, setShowInnerChildren] = useState(false); const { pathname } = useLocation(); function toggleChildren() { setShowChildren(!showChildren); } function toggleInnerChildren() { setShowInnerChildren(!showInnerChildren); } return ( <li className={`nav-item has-sub ${showChildren ? 'open menu-collapsed-open sidebar- group-active' : ''}`}> <SideNavLink icon={icon} onClickEvent={toggleChildren} link={link} title={title} /> <ul className="menu-content"> <div className="collapse show"> {children?.map((child, key) => ( <li key={key} className={`nav-item ${pathname == child.link ? 'active' : ''}`}> **//Here is my problem** <SideNavLink icon={child.icon} link={child.link} title={child.title} onClickEvent= {toggleInnerChildren} /> <ul className="menu-content"> <SubChildItems sub_children={child.sub_children} location={pathname} showInnerChildren={showInnerChildren} /> </ul> </li> ))} </div> </ul> </li>);} export default SideBarItem; //SideNavLink import React from 'react'; import { Link } from 'react-router-dom'; const SideNavLink = ({ icon, onClickEvent, link, title }) => { return ( <Link onClick={onClickEvent} className="d-flex align-items-center" to={link}> {icon} <span className="menu-title text-truncate">{title}</span> </Link> ); }; export default SideNavLink;