I have parent item Dealer/Staf and three inner children when I click on the inner children (Dealers/Staff, Department, Designation) all inner children expanded which I do not want. I want only those items to toggle when I click on it

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;