useContext auth hook returning null - node.js

Question

I have created a useAuth hook in order to allow the user access to the private route once authorised the authorising cookie is stored properly but the useAuth hook seems to be returning null. I also tried printing the value of setUser but it doesn't seem to print after the line setUser(res.data.currentUser) but the one before is printed I cannot figure out why.
The cookies are stored and set properly it just seems to be the auth hook that return setUser as null even though the line console.log("RES>DATA = ", res.data.currentUser); logs the correct details of the cookie but when I try to manually change the url to the private route after the cookie is stored it returns a null for the setUser returned from the auth hook and so access to private route isn't granted. This is done using react for frontend with node js and express for the backend. If any more context is necessary please let me know.
useAuth hook:
import { useState, useContext, useEffect } from "react";
import { UserContext } from "./UserContext";
import axios from "axios";
export default function useAuth() {
const { setUser } = useContext(UserContext);
const [error, setError] = useState(null);
useEffect(() => {
console.log("USE effect");
setUserContext();
});
//set user in context and push them home
const setUserContext = async () => {
console.log("In here");
return await axios
.get("auth/checkAuth")
.then((res) => {
console.log("RES>DATA = ", res.data.currentUser); // PRINTS THE CORRECT COOKIE VALUES
setUser(res.data.currentUser); // THIS SEEMS TO BE NULL?????
console.log("SET USER + ", setUser); // THIS DOES NOT PRINT
})
.catch((err) => {
setError(err);
});
};
return {
setUser,
};
}
Private route:
import React, { useContext } from 'react';
import {Route, Redirect, Navigate} from 'react-router-dom';
import { UserContext } from '../hooks/UserContext';
import useAuth from '../hooks/useAuth';
export default function PrivateRoute({children}) {
const auth = useAuth();
console.log("aUTH in priv = ", auth);
return auth ? children : <Navigate to="/"/>
}
App.js:
import "./App.css";
import { Redirect, Route, Routes, Switch } from "react-router-dom";
import useFetch from "./useFetch";
import { useEffect, useState, useRef } from "react";
import axios from "axios";
import Activities from "./components/Activities";
import HomePage from "./components/Home";
import Map from "./components/Map";
import checkUser from "./hooks/checkUser";
import { UserContext } from "./hooks/UserContext";
import useFindUser from "./hooks/checkUser";
import PrivateRoute from "./components/PrivateRoute";
function App() {
const [auth, setAuth] = useState(false);
const [activities, setActivities] = useState([]);
const notInitialRender = useRef(false);
const { user, setUser, isLoading } = useFindUser(); // works as expected
return (
<div className="App">
<UserContext.Provider value={{ user, setUser, isLoading }}>
<Routes>
<Route path="/" element={<HomePage />}></Route>
<Route path="/Activities" element={<Activities />} />
<Route
path="/Private"
element={
<PrivateRoute>
<Map />
</PrivateRoute>
}
/>
</Routes>
</UserContext.Provider>
</div>
);
}
export default App;
auth/checkAuth express route:
export const checkAuth = (req, res) => {
let currentUser;
console.log("res.cookies = ", req);
if (req.cookies.currentUser) {
// res.send(200);
currentUser = req.cookies.currentUser; // set to user object in cookies
console.log("current user = ", currentUser);
// return 200 status code
} else {
currentUser = null;
}
//res.json(currentUser);
res.status(200).send({ currentUser });
};
Map component which is private route component:
import react from 'react';
function Map() {
<div>
<p style={{color:'red'}}>You have access to the private route</p>
</div>
}
export default Map;
UserContext file:
import { createContext } from "react";
export const UserContext = createContext("null");
I tried logging values and using useEffect to call the function when the useAuth hook is called but couldn't figure it out