Ionic React glitch when changing route from tabs to non tabs

i have this route configuration

const App: React.FC = () => {
  return (
          <Route exact path="/login" render={() => <Login />} />
          <Route exact path="/programs" render={() => <Programs />} />
          <Route exact path="/tos" render={() => <TOS />} />
          <Route exact path="/syarat" render={() => <Syarat />} />
            render={() => <ProfileDetail />}
            render={() => <DigitalCardDetail />}
          <Route path="/tabs" render={() => <Tabs />} />
          <Redirect exact from="/" to="/login" />
export default App;
const Tabs: React.FC = () => (
      <Route exact path="/">
        <Redirect to="/tabs/home" />
      <Route exact path="/tabs/home">
        <Home />
      <Route exact path="/tabs/news">
        <News />
      <Route exact path="/tabs/profile">
        <Profile />
      <Route path="/tabs/digital-card">
        <DigitalCard />
    <IonTabBar slot="bottom">
      <IonTabButton tab="home" href="/tabs/home">
        <IonIcon aria-hidden="true" icon={home} />
      <IonTabButton tab="news" href="/tabs/news">
        <IonIcon aria-hidden="true" icon={newspaper} />
      <IonTabButton tab="digital-card" href="/tabs/digital-card">
        <IonIcon aria-hidden="true" icon={card} />
        <IonLabel>Kartu Digital</IonLabel>
      <IonTabButton tab="profile" href="/tabs/profile">
        <IonIcon aria-hidden="true" icon={people} />
        <IonLabel>Profil Saya</IonLabel>

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