Javascript – How to set specific path in react-router-dom?

I would to for the URL in the adress bar to show "/login" when im in the login page.

// App.js
<Routes>
    {isLoggedIn ? (
        <Route path="/" element={<Root onLogout={handleLogout} />}>
            <Route index element={<Topics />} />
            <Route path="employees" element={<EmployeeList />} />
            <Route path="employees/create" element={<RegisterEmployee />} />
            <Route path="employees/:employeeId" element={<EditEmployee />} />
            <Route path="user-entry" element={<Register />} />
            <Route path="dashboard" element={<Dashboard />} />
        </Route>
      ) : (
        <Route path="/" element={<Login onLogin={handleLogin} />} />
     )}
</Routes>

// index.js
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      {/* Using HashRouter(which introduces "#" in the URL) because when BrowserRouter is used, and the any page is refreshed, the app throws an error(Cannot Get) */}
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("app")
);

The above is working fine with exception that I need the path to be "/login", and when i change it, the page is blank, nothing is mounted.
The other paths are supose to be like the above, for the exception of the login.
Could anyone shed some light?