CreateContext not updating children when performin Authenticaion - reactjs

Question

I have a login component from which i try to save the authenticated user's data into the AuthContext using a custom useAuth() hooks. But when i set the value from within login component AuthContext never get updated and the auth object is null, but when i set the AuthContext from within another componenet it got updated as expected and i could access it from other component. what might be the reason behind this weird behaviour
import useAuth from "../../hooks/useAuth";
const {auth, setAuth} = useAuth();
useEffect(() => {
console.log(auth)
}, [auth]);
const submitHandler = async (e) => {
e.preventDefault();
try {
const response = await axios.post(LOGIN_URL,
JSON.stringify({ username, password }),
{
headers: { 'Content-Type': 'application/json' },
withCredentials: true
}
);
const accessToken = response.data ? response.data.accessToken : null;
const user = response.data ? response.data.user : null;
// setAuth({
// accessToken:accessToken,
// user:user
// });
const obj = {
"accessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIser5taSI6Im1AMkh0a3k2KnQ5aWZlIn0.eyJpc3MiOiJodHRwczpcL1wvYXBpLmNoZWNrc3RhbGwuY29tIiwiYXVkIjoiaHR0cHM6cdfrt2FwaS5jaGVja3N0YWxsLmNvbSIsImp0aSI6Im1AMkh0a3k2KnQ5aWZlIiwiaWF0IjoxNjY3NTkwMjg3LCJleHAiOjE2Njc1OTA1ODcsInVpZCI6MX0.4LYi3eDW6mfKB9H_vOjhfqttKoT1dGUdJuisU3esdwt",
"user": {
"username": "bob01",
"email": "bob#yahoo.com",
"created_at": 1659239223,
"full_name": "Bob L",
"role": 40,
"phone_number": "199765432",
"last_login": 16647884254
}
}
setAuth(obj);
setUsername('');
setPassword('');
//navigate(-1);
setModalShow(false);
}catch(err){
if (err.response) {
//do something
} else{
//do something
}
}
}
after async call the useEffect got called and log the result as expected but when i set the same result into the AuthContext through the useAuth hooks it never go updated
Below is my useAuth hooks
import { useContext, useDebugValue } from "react";
import AuthContext from "../context/AuthProvider";
const useAuth = () => {
const { auth } = useContext(AuthContext);
if (auth === undefined) {
throw new Error("useUserContext can only be used inside AuthProvider");
}
return useContext(AuthContext);
}
export default useAuth;
and also my AuthContext Provider
import React ,{ createContext, useState, useMemo } from "react";
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState({});
const [persist, setPersist] = useState(JSON.parse(localStorage.getItem("persist")) || false);
const value = useMemo(() => ({
auth, setAuth ,persist ,setPersist
}), [auth, setAuth, persist,setPersist]);
return (
<AuthContext.Provider value={value}>{children}</AuthContext.Provider>
)
}
export default AuthContext;