here is my code

Menu.tsx

const Menu = () => {
  const showCat = () => {
    let res = Array(5)
      .fill(0)
      .map((_, i) => (
        <IonItem key={i}>
          <IonLabel>Cat{i}</IonLabel>
        </IonItem>
      ));
    return <IonList>{res}</IonList>;
  };
  return (
    <>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Meme11</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonMenuToggle auto-hide="false">
            <IonItem button routerLink={"/home"} routerDirection="none">
              <IonLabel>Home</IonLabel>
            </IonItem>
            <IonItem button routerLink={"/about"} routerDirection="none">
              <IonLabel>About</IonLabel>
            </IonItem>
            <IonItem
              onClick={() => {
                showCat();
              }}
            >
              <IonLabel>Categories</IonLabel>
            </IonItem>
          </IonMenuToggle>
        </IonList>
      </IonContent>
    </>
  );
};

App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonSplitPane contentId="menu">
      <IonMenu class="custom" contentId="menu">
        <Menu />
      </IonMenu>
      <IonReactRouter>
        <IonRouterOutlet id="menu">
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route exact path="/about">
            <About />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonSplitPane>
  </IonApp>
);

In the above code, If I click on any Item of Ion List, the sidenav is getting closed(toggled). And I don't want it to close only if i click outside the sidenav or on ionmenubutton, it should close. If I click on the ionitem 'categories', then showCat function should get called and it should return nested ionlist.

Thank You