How to Create a Protected Route with react-router-dom?

// App.js
import React, { useState, useEffect } from 'react';
import { Route, Routes } from 'react-router-dom';

import { BrowserRouter } from 'react-router-dom'
import Dashboard from './components/Dashboard';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './components/LoginPage';
const App = () => {
    const [isAuthenticated, setIsAuthenticated] = 
                                useState(false);

    const login = () => {
        setIsAuthenticated(true);
    };

    const logout = () => {
        setIsAuthenticated(false);
    };

    return (
        <BrowserRouter>
            <Routes>
                <Route element={<ProtectedRoute isAuthenticated
                                        ={isAuthenticated} />} >
                    <Route path="dashboard" 
                           element={<Dashboard logout
                                     ={logout} />} />

                </Route>

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

            </Routes>
        </BrowserRouter>
    );
};

export default App;

// ProtectedRoute.js
import React from 'react'
import { Navigate, Outlet } from 'react-router-dom'

const ProtectedRoute = (props) => {
    // let auth={'token': false}
    return (
        props.isAuthenticated ? 
        <Outlet /> : <Navigate to="/" />
    )
}

export default ProtectedRoute;

// LoginPage.js
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginPage = ({ login }) => {
    const [userId, setUserId] = useState('');
    const [pass, setPass] = useState('');
    const navigate = useNavigate();

    const handleLogin = () => {
        if (userId === 'user' && pass === 'pass') {
            login(userId, pass);
            navigate('/dashboard');
        }
    };

    return (
        <div>
            <h2>Login Page</h2>
            <div>
                <input
                    type="text"
                    placeholder="User ID"
                    value={userId}
                    onChange={(e) => 
                        setUserId(e.target.value)}
                />
            </div>
            <div>
                <input
                    type="text"
                    placeholder="Password"
                    value={pass}
                    onChange={(e) => 
                        setPass(e.target.value)}
                />
            </div>
            <button onClick={handleLogin}>Login</button>
        </div>
    );
};

export default LoginPage;

// Dashboard.js
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Dashboard = ({ logout }) => {
    const navigate = useNavigate();

    const handleLogout = () => {
        logout();
        navigate('/');
    };

    return (
        <div>
            <h2>Hello user welcome to Dashboard</h2>
            <h3>This page is protected</h3><br />
            <button onClick={handleLogout}>
                Logout
            </button>
        </div>
    );
};

export default Dashboard;