(React / Ionic) IonSplitPane in App.tsx makes main content disappear

Ionic Framework Ionic React
1

The IonSplitPane in App.tsx makes the main content. I think it’s because I messed up with the structure of IonPage, IonContent and IonSplitPane. I want to create the tabs separately since I have to make more than one tabs and they should appear on different pages. The tab should be on the left-hand side.

Problem 1: Main content disappears after using IonSplitPane. I tried using other components to make IonTabs appear on the left-handed side, but the tab not showing. So, I have to use IonSplitPane.

Problem 2: How to make the tab hide in some pages?

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/signup" component={CompanySignUp} exact={true} />
        <Route path="/home" component={Home} exact={true} />
      </IonRouterOutlet>
      <IonHeader className="ion-no-border">
        <IonToolbar>There's a main toolbar here</IonToolbar>
      </IonHeader>
      <IonContent>
        <IonSplitPane contentId="RAMenu">
          <RAtabs />
        </IonSplitPane>
      </IonContent>
    </IonReactRouter>
  </IonApp>
);

const RAtabs: React.FC = () => {

  return (
    <IonReactRouter>
      <IonMenu menuId="RAMenu" contentId="RAMenu">
        <IonHeader>
          <IonToolbar>
            <IonTitle>Assessment</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/tab1" component={tab1} exact={true} />
            </IonRouterOutlet>

            <IonTabBar slot="top">
              <IonTabButton tab="tab1" href="/tab1">
                <IonTitle>Tab 1</IonTitle>
              </IonTabButton>
              <IonTabButton tab="tab2" href="/tab2">
                <IonTitle>Tab 2</IonTitle>
              </IonTabButton>
              <IonTabButton tab="tab3" href="/tab3">
                <IonTitle>Tab 3</IonTitle>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonContent>
      </IonMenu>
    </IonReactRouter>
  );
};

const tab1: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <IonItem>
          <IonLabel>Username</IonLabel>
          <IonInput> </IonInput>
        </IonItem>
      </IonContent>
    </IonPage>
  );
};