Not able to close ion-menu when clicked out side the menu, I am following ionic framework docs and they are not using any additional codes for closing

Question

Link to ion-menu ionic docs. I am using ionic-react and elements. menu items list is mapped inside an ionContent inside an IonMenu. when menu items are clicked I am using menuController.toggle() to close the menu. Can someone help me to close the menu when the user clicks outside the menu?

 <IonMenu contentId="main">
      <IonContent>
        <div className="menu-list-container">
          <IonList lines="none" className="side-menu">
            {!_.isEmpty(menuList) &&
              menuList.map((item: any) => {
                return (
                  <IonRouterLink routerLink={item.link}>
                    <div
                      className="menu-items"
                      onClick={() => {
                        setMenuActive(item);
                        menuController.toggle();
                      }}
                    >
                      <span className={item.menuIcon}></span>
                      {item.menuName}
                    </div>
                  </IonRouterLink>
                );
              })}
          </IonList>
        </div>
      </IonContent>
    </IonMenu>