Protected Route not working in react-router-v6

Question

I am trying to implement Protected route that will check if the user is logged in before accessing some paths, and if it is not the user will be redirected to login.

I tried to follow this article: https://ui.dev/react-router-protected-routes-authentication/

But still my code is somehow not accessing that component and renders without checking for authentication.

Code: App.js

import './App.css';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import axios from 'axios';
import { logout } from './redux/authSlice';
import { Header, ProtectedRoute } from './components/index';
import { Dashboard, Home, Login, Signup } from './pages/index';

axios.defaults.withCredentials = true;

function App() {
  const dispatch = useDispatch();

  // Add event listener that gets triggered when logout is called in one of the tabs.
  // This will call logout in all of the tabs.
  useEffect(() => {
    const syncLogout = (event) => {
      if (event.key === 'logout') {
        console.log('Logged out from storage :)');
        dispatch(logout());
      }
    };

    window.addEventListener('storage', syncLogout);
    return () => window.removeEventListener('storage', syncLogout);
  }, [dispatch]);

  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <ProtectedRoute path="/dashboard" element={<Dashboard />} />
      </Routes>
    </>
  );
}

export default App;

components/ProtectedRoute.js (note i have added console to check if this component is getting called)

import { useSelector } from 'react-redux';
import { Navigate, Route } from 'react-router-dom';

export const ProtectedRoute = ({element, path}) => {
  const name = useSelector(state => state.auth.name);
  console.log("in protected route");

  const elementToRender = (name ? element : <Navigate to="/login" replace state={{path}} />);
  console.log(elementToRender);
  return <Route path={path} element={elementToRender} />
}

components/index.js

export { Header } from './Header';
export { Footer } from './Footer';
export { QuizzesCreated } from './QuizzesCreated';
export { DisplayQuiz } from './DisplayQuiz';
export { CreateQuiz } from './CreateQuiz';
export { ProtectedRoute } from './ProtectedRoute';

If I load dashboard, there is no console and no authentication or redirection happening. /dashboard screenshot of console