Reactjs – React Compiles to Blank White Page with Error Handling Router using react-router-dom v6

My React application compiles properly but only serves a white page. When inspecting in the browser, the following can be seen. Error from inspect page

I noticed this error emerging after adding AuthContext for authentication using React Context.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
      <App />
  </ThemeProvider>
);

App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { Container } from '@mui/material';
import { BrowserRouter as Router } from 'react-router-dom';

import NoMatchPage from './NoMatch';
import LoginPage from './components/Authentication/LoginPage';
import PrivateRoute from './utils/PrivateRoute';
import { AuthProvider } from './context/AuthContext';
import Header from './components/Header';
import HomePage from './components/Homepage';

const App = () => {
    return (
    <Container component="main" maxWidth="l">
      <Router>
        <Routes>
          <AuthProvider>
            <Header />
            <Route path="/home" element={<PrivateRoute><HomePage /></PrivateRoute>} />

            <Route path="/login" element={<LoginPage />} />
            
            <Route path='*' element={<NoMatchPage />} />
          </AuthProvider>
        </Routes>
      </Router>

    </Container>
  );
}

export default App;

AuthContext.js

import React, { createContext, useState } from 'react'

const AuthContext = createContext()

export default AuthContext;

export const AuthProvider = ({children}) => {

    let [user, setUser] = useState({username: 'user'})
    let [authTokens, setAuthTokens] = useState(null)

    let loginUser = async (e) => {
        e.preventDefault()
    }

    let logoutUser = (e) => {
        e.preventDefault()
    }

    let contextData = {
        user: user,
        authTokens: authTokens,
        loginUser: loginUser,
        logoutUser: logoutUser,
    }

    return(
        <AuthContext.Provider value={contextData}>
            {children}
        </AuthContext.Provider>
    )
}

Header.js

import React, { useContext, useState } from 'react'
import { Link } from 'react-router-dom'
import AuthContext from '../context/AuthContext'

const Header = () => {
    let { user, logoutUser } = useContext(AuthContext)
    
    return (
        <div>
            <Link to="/">Home</Link>
            <span> | </span>
            {user ? (
                <p onClick={logoutUser}>Logout</p>
            ) : (
                <Link to="/login" >Login</Link>
            )}
            {user && <p>Hello {user.username}!</p>}
            
        </div>
    )
}

export default Header

I expected my page to render properly with different endpoints working. I have built both with and without babel and webpack, and the error still persists. I have downgraded react-router-dom to v5 and updated the code accordingly, and the error persists. Removing and including the Header component has not made a difference. Please advise.

For reference, I was following this tutorial to implement JWT authentication into my project. I am trying to integrate Material UI styling into my project as well, could this be a potential point of error?