this is a solution for the problem, not a question, at first, I was trying to redirect the user to the registration page if they haven't already logged in, but unfortunately, react-router-dom v6 was out already and the official website was of no help.

This is what I was trying to do

import Home from "./pages/Home/Home";
import Register from "./pages/Register/Register";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Redirect
} from "react-router-dom";

function App() {
  const userauth = false
  return (
    <Router>
        <Routes>
          <Route exact path='/' element={userauth ? <Home /> : <Redirect to="/register"/>}/>
        </Routes>
    </Router>
  )
}

you only need to replace "Redirect" with "Navigate"

    import Home from "./pages/Home/Home";
    import Register from "./pages/Register/Register";
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      Navigate
    } from "react-router-dom";
    
    function App() {
      const userauth = false
      return (
        <Router>
            <Routes>
              <Route exact path='/' element={userauth ? <Home /> : <Navigate to="/register"/>}/>
            </Routes>
        </Router>
      )
    }