Ionic React glitch when changing route from tabs to non tabs

Ionic Framework
1

i have this route configuration

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/login" render={() => <Login />} />
          <Route exact path="/programs" render={() => <Programs />} />
          <Route exact path="/tos" render={() => <TOS />} />
          <Route exact path="/syarat" render={() => <Syarat />} />
          <Route
            exact
            path="/profile-detail"
            render={() => <ProfileDetail />}
          />
          <Route
            exact
            path="/digital-card-detail"
            render={() => <DigitalCardDetail />}
          />
          <Route path="/tabs" render={() => <Tabs />} />
          <Redirect exact from="/" to="/login" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};
export default App;

const Tabs: React.FC = () => (
  <IonTabs>
    <IonRouterOutlet>
      <Route exact path="/">
        <Redirect to="/tabs/home" />
      </Route>
      <Route exact path="/tabs/home">
        <Home />
      </Route>
      <Route exact path="/tabs/news">
        <News />
      </Route>
      <Route exact path="/tabs/profile">
        <Profile />
      </Route>
      <Route path="/tabs/digital-card">
        <DigitalCard />
      </Route>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="home" href="/tabs/home">
        <IonIcon aria-hidden="true" icon={home} />
        <IonLabel>Beranda</IonLabel>
      </IonTabButton>
      <IonTabButton tab="news" href="/tabs/news">
        <IonIcon aria-hidden="true" icon={newspaper} />
        <IonLabel>Berita</IonLabel>
      </IonTabButton>
      <IonTabButton tab="digital-card" href="/tabs/digital-card">
        <IonIcon aria-hidden="true" icon={card} />
        <IonLabel>Kartu Digital</IonLabel>
      </IonTabButton>
      <IonTabButton tab="profile" href="/tabs/profile">
        <IonIcon aria-hidden="true" icon={people} />
        <IonLabel>Profil Saya</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
);

export default Tabs;

Whenever i try to change route from any tabs children, let’s say from /tabs/home to /programs, there’s always a glitch for a split second, is there a way to fix it?

Although i can add all routes inside tabs component but i want to remove the bottom navigation bar but then i’ll need to add condition to hide the bottom navigation bar using css? but i don’t think that’s a good idea and there has to be a better way