I am saving a user object into the browser cookies and want to read its properties in the frontend.
The error I am getting is:

Cannot read properties of undefined (reading 'name')
TypeError: Cannot read properties of undefined (reading 'name')
    at ProfileCard (http://localhost:3000/main.2a650ebd2579fa9c50cd.hot-update.js:56:26)

userContext.jsx

import axios from 'axios';
import { createContext, useState, useEffect } from 'react';

export const UserContext = createContext({});

export function UserContextProvider({ children }) {
    const [user, setUser] = useState(null);
    useEffect(() => {
        if (!user) {
            axios.get('/profile').then(({ data }) => {
                setUser(data);
            });
        }
    }, []);

    return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
} from 'react-router-dom';

import './index.css';

import App from './App';
import Signup from './pages/auth/Signup';
import Login from './pages/auth/Login';
import axios from 'axios';
import { Toaster } from 'react-hot-toast';
import { UserContextProvider } from './context/userContext';

axios.defaults.baseURL = 'http://localhost:8000';
axios.defaults.withCredentials = true;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <UserContextProvider>
        <Toaster position='bottom-right' toastDuration={{ duration: 2000 }} />
        <Router>
            <Routes>
                <Route path='/dashboard' element={<App />} />
                <Route path='/signup' element={<Signup />} />
                <Route path='/login' element={<Login />} />
                <Route exact path='/' element={<Navigate to='/dashboard' />} />
            </Routes>
        </Router>
    </UserContextProvider>
);

ProfileCard.jsx

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

export default function ProfileCard() {
    const [isProfileExpanded, setProfileExpanded] = useState(false);
    const { user } = useContext(UserContext);

    return (
                       ...
                        <a
                            className='block px-4 py-2 text-sm text-gray-700'
                            role='menuitem'
                        >
                            {user.name}
                        </a>
                       ...

The profile with the user gets stored in the browser like this:

{
    "email": "[email protected]",
    "id": "66599569fd060626919b7ed7",
    "name": "Luke",
    "iat": 1717685285
}

Why can’t I access these properties of the object? The route to the backend is working perfectly fine and giving back the correct data I need but I simply cannot access it in the frontend.