aquí está mi código

Menú.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> </> ); };

Aplicación.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> );

En el código anterior, si hago clic en cualquier elemento de la lista de iones, la navegación lateral se cierra (alterna). Y no quiero que se cierre solo si hago clic fuera de sidenav o en el botón ionmenu, debería cerrarse. Si hago clic en las 'categorías' de ionitem, entonces se debería llamar a la función showCat y debería devolver la lista de iones anidada.

Gracias