Защищенный маршрут React не работает в моем App.js --- v6

Помощь Я использую защищенный маршрут в своем приложении React. Но это не работает. Все остальные элементы работают, но когда я дошел до «/account», весь экран стал белым. Это мой код. Мне будет очень полезно, если вы дадите этот ответ. Спасибо :)

Код защищенного маршрута:

import React, { Fragment } from 'react';
import { useSelector } from 'react-redux';
import { Route, Routes, redirect } from 'react-router-dom';



const ProtectedRoute = ({ element: Element, ...rest }) => {


    const { loading, isAuthenticated, user } = useSelector(state => state.user);



    return (
        <Fragment>

            {!loading && 
            
            
            (<Routes> 

                <Route 
                    {...rest}
                    
                    render = {(props) => {

                        if (!isAuthenticated) {
                            return redirect("/login")
                        }

                        return <Element {...props} />
                    }}


                
                
                />
            
            </Routes>
            
            )}

        </Fragment>
    )
}

export default ProtectedRoute;

Я использую ProtectedRoute.js в App.js. Вот код. Код приложения.js:

import React from 'react';
import {BrowserRouter as Router,Route,Routes} from "react-router-dom"; 
import './App.css';
import Header from "./component/layout/Header/Header.js";
import webFont from "webfontloader";
import Footer from './component/layout/Footer/Footer';
import Home from "./component/Home/Home.js";
import ProductDetails from "./component/Product/ProductDetails.js";
import Products from "./component/Product/Products.js";
import Search from "./component/Product/Search.js";
import LoginSignUp from './component/User/LoginSignUp';
import store from "./store";
import { loadUser } from './action/userAction';
import UserOption from "./component/layout/Header/UserOption.js";
import { useSelector } from 'react-redux';
import Profile from "./component/User/Profile.js"
import ProtectedRoute from './component/Route/ProtectedRoute';

function App() {

  const {isAuthenticated, user} = useSelector(state => state.user)

React.useEffect(() => {


  webFont.load({
    google:{
      families:["Roboto","Droid Sans","Chilanka"]
    },
  });

  store.dispatch(loadUser())


}, [])


  return (
    
    <Router>
      
      <Header />
      {isAuthenticated && <UserOption user = {user} />}
      
      <Routes>
        <Route path = "/" element = {<Home />} />
        <Route path = "/product/:id" element = {<ProductDetails />} />
        <Route path = "/products" element = {<Products />} />
        <Route path = "/products/:keyword" element = {<Products />} />

        <Route path = "/search" element = {<Search />} />

        <Route path = "/account" element = { <ProtectedRoute> <Profile /> </ProtectedRoute> } />

        <Route path = "/login" element = {<LoginSignUp />} />


      </Routes>


      <Footer />
      
    </Router>
    
  );
}

export default App;