Default route as per condition not working in ionic react

Question

I am learning React in Ionic. I have a basic project which has login and tabs pages in page folder. In component folder I added 2 components home and profile which are for bottom tabs. Navigation is like I'm checking for a stored boolean isLoggedin. If its false, redirect to login page. Else redirect to tabs page.

I have mainly 2 issues.

1. When I enter url as 'localhost:8100' without any path, it renders Login page but url bar shows localhost:8100. It should show localhost:8100/login
2. When I logout by setting isLoggedin to false and redirecting to login page, url path changes but page doesn't renders. I added a screenshot of pages and component paths. Any suggestion is appreciated. Thanks.

const Tabs: React.FC = () => {
  return (
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>

          <Redirect exact path="/" to="/home" />
          

          <Route path="/home" exact={true}>
            <Home />
          </Route>
          <Route path="/profile" exact={true}>
            <Profile />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/home">
            <IonIcon icon={home} />
            <IonLabel>Home</IonLabel>
          </IonTabButton>

          <IonTabButton tab="profile" href="/profile">
            <IonIcon icon={cog} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  );
};

export default Tabs;

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

  const [globalState, setGlobalState] = useState(initialState);
  const globalContextState = { globalState, setGlobalState };
  const history = useHistory();
  useEffect(() => {
        const setupStore = async () => {
            await createStore("AlansDB")
        }
        setupStore();
    }, []);

  const [isLoggedin, setLoggedIn] = useState(false);
  useEffect(() => {
    async function checkIfLoggedin() {
      const isLoggedin = await get('isLoggedin')
      console.log("isLoggedin: "+isLoggedin)
      if (!isLoggedin || isLoggedin==null) {
        set('isLoggedin', false);
        setLoggedIn(false)
      }else{
        setLoggedIn(true)
      }
    }
    checkIfLoggedin()
  }, []);

  return (
    <IonApp>
      <GlobalContext.Provider value={globalContextState}>
        <IonReactRouter>
          <IonRouterOutlet>

          <Route
            exact
            path="/"
            component={isLoggedin ? Tabs : Login}
          />
        
          <Route path="/login" exact={true}>
            <Login />
          </Route>

          <Route path="/tabs" exact={true}>
            <Tabs />
          </Route>
            <Route path="/register" component={Register} exact={true} />

          </IonRouterOutlet>
        </IonReactRouter>
      </GlobalContext.Provider>
    </IonApp>
  );

}

export default App;