After giving wrong route path app.js doesn't re render

I am creating a very basic react app using redux toolkit and redux saga. The expected criteria in Login module are:

• after successful login I should navigate to home page
• login page should not contain navbar whereas home page should have
• if I give wrong route path if I logged in I should be navigated to homepage and if I am not logged in then I should be navigated to login page
• once logged in without logout on opening the app next time I should navigate to home page directly
• after logout I should navigate to login page

Infact in my current code everything is working properly. Here is my code

(full source code is here: https://github.com/nayak001/reduxtoolkit_saga_demo.git)

App.js

import { useSelector } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import NavBar from "./pages/navbar/NavBar";
import RootRoute from "./roots/RootRoute";
import LoginRoute from "./roots/LoginRoute";
import Login from "./pages/login/Login";
import React, { useEffect } from "react";

function App() {
  const loggedin = localStorage.getItem("loggedin") == "yes" ? true : false;
  const x = useSelector((state) => state.LoginSlice.loggedin);
  console.log("-->Inside App loggedin: ", loggedin);
  console.log("-->Inside App x: ", x);

  useEffect(() => {
    console.log("--> loggedin chaged localStorage: ", localStorage);
    console.log("--> loggedin chaged x: ", x);
  }, [x]);
  return (
    <>
      <BrowserRouter>
        {loggedin ? (
          <div>
            <NavBar />
            <br />
          </div>
        ) : (
          <div className="page_container"></div>
        )}
        <div className="page_container">
          <RootRoute loggedin={loggedin} />
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

RootRoute.js

import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Login from "../pages/login/Login";
import Home from "../pages/home/Home";
import FetchContacts from "../pages/fetch_contacts/FetchContacts";
import SendMessage from "../pages/send_message/SendMessage";
import ShowReports from "../pages/show_reports/ShowReports";
import NoPage from "../pages/no_page/NoPage";

function RootRoute({ loggedin }) {
  //console.log("-->Inside RootRoute loggedin: ", loggedin);
  return (
    <Routes>
      {/* <Route exact path="/" element={<Home />}></Route> */}
      {/* <Route index element={<Home />}></Route> */}
      {!loggedin && <Route path="/login" element={<Login />} />}
      {loggedin && (
        <>
          <Route path="/home" element={<Home />} />
          <Route path="/fetchcontacts" element={<FetchContacts />} />
          <Route path="/sendmessage" element={<SendMessage />} />
          <Route path="/showreports" element={<ShowReports />} />
        </>
      )}
      <Route path="*" element={<Navigate to={loggedin ? "/home" : "/login"} />} />
    </Routes>
  );
}

export default RootRoute;

I am facing 2 issues

1. In app.js if am not using useSelector

    const x = useSelector((state) => state.LoginSlice.loggedin);
   

since it is not used any where, then it is not automatically redirecting to home page.

Why?

2. The login and logout works perfectly unless I put a wrong route path in url. There I have been redicted to home. And then I press logout then logout event is fired but it remains on the same page. After I refresh the page It shows login page.

Why?