Different Menu for Different page in Ionic

Question

My first-page wont respond and scroll as my second-page menu is overlaying its hidden menu

I'm trying to add a menu for my staff page for a different page, I tried copying the existing menu and changed some item. I trying to figure out where i put my menu on route

<IonApp>
      <IonReactRouter>

        <IonSplitPane contentId="main">

           -- my first menu ---
          <Menu />
           -------
          <IonRouterOutlet id="main">
            <Route path="/" exact={true}>
              <Redirect to="/page/login" />
            </Route>
            <Route path="/page/Home" component={Home} />
           
                -----many route----

          </IonRouterOutlet>
        </IonSplitPane>

      </IonReactRouter>

     <IonReactRouter>
        <IonSplitPane contentId='staff'>

           -----second menu------
          <Staff_Menu />
           -------------------
          <IonRouterOutlet id='staff'>
            <Route path="/staff" >
              <Redirect to="/staff/Dashboard" />
            </Route>

            <Route path="/staff/Dashboard" component={Staff_Dashboard} />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter> 

    </IonApp>