Не срабатывают Routes, Route, Navigate с пакета react-router-dom

import React from 'react';
import {Routes, Route, Navigate} from 'react-router-dom';
import {LinksPage} from './pages/LinksPage';
import {CreatePage} from './pages/CreatePage';
import {DetailPage} from './pages/DetailPage';
import {AuthPage} from './pages/AuthPage';
 
export const useRoutes = isAuthenticated => {
    if (isAuthenticated){
        return(
            <Routes>
                <Route path="/links" element={<LinksPage />}></Route>
                <Route path="/create"  element={<CreatePage />}></Route>
                <Route path="/detail/:id"  element={<DetailPage />}></Route>
                <Navigate to="/create"/>
            </Routes>
        )
    }
 
    return(
        <Routes>
            <Route path="/" element={<AuthPage />}></Route>
            <Navigate to="/" />
        </Routes>
    )
}

import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './Components/Home';
import Login from './Components/Login';
import Register from './Components/Register';
import CreatePost from './Components/CreatePost';
import AllPost from './Components/AllPost';
import Navbar from './Components/Navbar';
function App() {
  return (
 <BrowserRouter>
 <div className="App">
 <Navbar />
 <Switch>
 <Route exact path='/' component={Home}>
 <Home />
 </Route>
 <Route exact path='/Register' component={Register}>
 <Register /> 
 </Route>
 <Route exact path='/Login' component={Login}>
 <Login />
 </Route>
 <Route exact path='/CreatePost' component={CreatePost}>
 <CreatePost />
 </Route>
 <Route exact path='/AllPost' component={AllPost}>
 <AllPost />
 </Route>
 </Switch>
 </div>
 </BrowserRouter>
  );
}
export default App;

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import 'materialize-css';
import { useRoutes } from './routes';
 
function App() {
  const routes = useRoutes(false);
  return (
    <Router>
      <div className='container'>
        {routes}
      </div>
    </Router>
  );
}
 
export default App;

import React from 'react';
 
export const AuthPage = () => {
    return (
        <div>
            <h1>Auth Page</h1>
        </div>
    )
}