How to add sub menu in Side Menu in Ionic React?

Question

I have created a side menu in Ionic React, and would like to add a sub Menu for an Item of the side Menu.

SideMenu component:

import React from "react";
import { useContext } from "react";
import {
...
  arrowDown,
  arrowForward,
} from "ionicons/icons";

const SideMenu: React.FC = () => {
  const { firstName, lastName } = useContext(AuthContext);

  return (
    <React.Fragment>
      <IonMenu content-id="main-content">
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>
              Hi, {firstName} {lastName}
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonMenuToggle auto-hide="false">
              <IonItem button routerLink="/homePage">
                <IonIcon slot="start" icon={homeOutline}></IonIcon>
                <IonLabel>Home</IonLabel>
              </IonItem>
              <IonItem button>
                <IonIcon slot="start" icon={ arrowForward }></IonIcon>
                <IonLabel>Help</IonLabel>
              </IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default SideMenu;

Under 'Help' Item I would like to add two other sub items. How should I implement this? Any help would be really appreciated.

Answer 1

For anyone who is interested, I managed to implement the sub menu in Side Menu using React and Ionic.

SideMenu component:

import React from "react";
import { useContext } from "react";
import {
  arrowDown,
  arrowForward,
} from "ionicons/icons";

const SideMenu: React.FC = () => {
  const { firstName, lastName } = useContext(AuthContext);
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <IonMenu content-id="main-content">
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>
              Hi, {firstName} {lastName}
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonMenuToggle auto-hide="false">
              <IonItem button routerLink="/homePage">
                <IonIcon slot="start" icon={homeOutline}></IonIcon>
                <IonLabel>HOME</IonLabel>
              </IonItem>
          </IonList>
         </IonMenuToggle>

        <IonItem
            button
            onClick={() => {
              setIsVisible(true);
              if (isVisible === true) {
                setIsVisible(false);
              }
            }}
          >
            <IonIcon slot="start" icon={informationCircleOutline}></IonIcon>
            <IonLabel>HELP</IonLabel>
            <IonIcon
              slot="end"
              icon={isVisible ? arrowDown : arrowForward}
            ></IonIcon>
          </IonItem>
          <IonMenuToggle>
            <IonList>
              <IonItem
                hidden={!isVisible}
                button
                routerLink="/item2"
              >
                <IonIcon slot="start" icon={help}></IonIcon>
                <IonLabel>Sub Item 1</IonLabel>
              </IonItem>
              <IonItem
                hidden={!isVisible}
                button
                routerLink="/item1"
              >
                <IonIcon slot="start" icon={help}></IonIcon>
                <IonLabel>Sub Item 2</IonLabel>
              </IonItem>
            </IonList>
          </IonMenuToggle>

        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default SideMenu;

Ps.

'arrowForward' icon when 'Help' item is not clicked. 
'arrowDown' icon when 'Help' item is clicked.