Using multiple react metis menu, allowing only one active item

Question

I'm using the React Metis Menu in one of project. One of the requirement was to have the menu formatted in such a manner where:

*Dashboard*
 - Item A 
    - Sub Item A
    - Sub Item B

 - Item B
    - Sub Item C


*Analytics* 
 - Item C 
    - Sub Item D
    - Sub Item E

From the structure, I figured that I could use 2 Metis Menu so that I can different headers (Dashboard/Analytics) before the individual clickable menu items.

The functionality works great but I am stuck with another situation where I now have 2 possible active items being highlighted at the same time.

I referred to the API at https://www.npmjs.com/package/react-metismenu#active-link-selectors, which suggested that we can use activeLinkLabel, activeLinkTo to override/control the active selectors. However, it seems to only work when first loaded, but subsequent clicks will make the changes obsolete.

...
const [ selected, setSelected ] = useState('');
const handleOnSelected = (event) => {
   const item = event.currentTarget;
   ...
   ...
   setSelected(item.name);

}
...


return (
<Fragment>
   <h5>Dashboard</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={DashboardItems} className="vertical-nav-menu" />

   <h5>Analytics</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={AnalyticsItems} className="vertical-nav-menu" />
</Fragment>);

Has anyone used this library before or could point out what I could be interpreting wrongly from the API?

Answer 1

 <Fragment>
    <h5 className="app-sidebar__heading">Menu1</h5>
    <MetisMenu
      content={MainNav1}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />

    <h5 className="app-sidebar__heading">Menu2</h5>
    <MetisMenu
      content={MainNav2}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />
  </Fragment>