React Router used with Private Route is rendering a blank page

Question

I have a bug in my code and as always I can't find it, so please help me to find the way to make it work.

I have an app where I'm trying to add user authentication. I am referring the following tutorial: https://www.youtube.com/watch?v=xjMP0hspNLE&t=3384s

Problem: When I added the Private Route, it is rendering me a blank page.

Let's begin from the start.

Below are the files I have written.

Homepage:

import React from 'react'

const HomePage = () => {
  return (
    <div>
      <p> I am logged in to the home page!</p>
    </div>
  )
}

export default HomePage

LoginPage:

import React from 'react'

const LoginPage = () => {
  return (
    <div>
      <form>
        <input type="text" name="username" placeholder='Enter Username' />
        <input type="password" name="password" placeholder='Enter Password' />
        <input type="submit" />
      </form>
    </div>
  )
}

export default LoginPage

PrivateRoute:

import { Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({ children, ...rest }) => {
  console.log("PrivateRoute worked fine!")
  return (
    <Route {...rest}>{children}</Route>
  )
}

export default PrivateRoute

Header.js:

import React from 'react'
import { Link } from 'react-router-dom'
const Header = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <span>|</span>
      <Link to="/login">Login</Link>
    </div>
  )
}

export default Header

App.js: Here, if instead of PrivateRoute, if I use Route, it is working perfectly

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import PrivateRoute from './utils/PrivateRoute'
import HomePage from './pages/HomePage'
import LoginPage from './pages/LoginPage'
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Routes>
          <PrivateRoute path="/" element={<HomePage />} exact />
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;