LocalStorage values are one login behind - reactjs

Question

I'm having this problem with my AuthContext from a React app. I check the localStorage and the values stored are from the last user logged, so I have to login twice to get the corrent info.
This is the Context code. And the 'useLocalStorage' function. I guess in the useMemo is the problem but I haven't been able to solve it. Is this a bad approach?
import { createContext, useContext, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useLocalStorage } from "./useLocalStorage";
import jwtDecode from "jwt-decode";
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [token, setToken] = useLocalStorage("accessToken", null);
const [userId, setUserId] = useLocalStorage("currentUserId", null);
const [userEmail, setUserEmail] = useLocalStorage("currentUserEmail", null);
const [userRole, setUserRole] = useLocalStorage("currentUserRole", null);
const [user, setUser] = useState({});
const navigate = useNavigate();
const login = async (credentials) => {
return fetch("https://localhost:7264/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(credentials),
})
.then((res) => res.json())
.then((res) => {
setToken(res);
console.log(res);
const tokenToDecode = localStorage.getItem("accessToken");
setUser(jwtDecode(tokenToDecode));
setUserId(user.sub);
setUserEmail(
user[
"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress"
]
);
setUserRole(
user["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"]
);
});
};
const logout = () => {
setToken(null);
setUserId(null);
setUserEmail(null);
setUserRole(null);
navigate("/", { replace: true });
};
const value = useMemo(
() => ({
token,
login,
logout,
userId,
userEmail,
userRole,
}),
[token]
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export const useAuth = () => {
return useContext(AuthContext);
};
import { useState } from "react";
export const useLocalStorage = (keyName, defaultValue) => {
const [storedValue, setStoredValue] = useState(() => {
try {
const value = localStorage.getItem(keyName);
if (value) {
return JSON.parse(value);
} else {
localStorage.setItem(keyName, JSON.stringify(defaultValue));
return defaultValue;
}
} catch (err) {
return defaultValue;
}
});
const setValue = (newValue) => {
try {
localStorage.setItem(keyName, JSON.stringify(newValue));
} catch (err) {}
setStoredValue(newValue);
};
return [storedValue, setValue];
};