Axios interceptor with context - reactjs

Question

I've got an auth context which handles login / logout, saves a token and user details in state as well as localStorage.
An axios instance (authAxios) used in the app intercepts all requests from within this AuthContext.
There's another context provider nested inside AuthContext which makes fetch requests upon login, and uses the authAxios instance. It requires the token to be available with authAxios based on the role level of user (admin, staff, etc). The inner context provider makes its requests from a useEffect with dependencies [ token / roleLevel ] that it's consuming from the AuthContext provider.
The problem arises when the app sees a user log out and a different user (of a different roleLevel) log in. The inner context provider's useEffect fires its request with authAxios, which strangely doesn't have the updated token. Logging the token from AuthContext spits out the new token, but authAxios is still with the old token for that first request even for the new user.
Code below:
/* authAxios */
import axios from "axios";
import {apiEndpoint} from "./constURLs";
const authAxios = axios.create({
baseURL: apiEndpoint,
});
export default authAxios;
/*************/
/* AuthContext.tsx */
import authAxios from "./authAxios";
export const AuthContext = React.createContext<AuthContextState>(defaultState);
export const AuthContextProvider = (children: React.ReactNode) => {
const [state, setState] = React.useState<AuthContextState>(retrieveFromStorage());
/* auth functionality */
React.useMemo(() => {
console.log("token", ctxState.token); // new token available here for the first request
authAxios.interceptors.request.use(req =>
if (ctxState.token) {
req.headers.Authorization = `Token ${ctxState.token}`;
}
return req;
}, err => {
if (DEBUG) {
console.error("authAxios error", err);
}
return Promise.reject(err);
})
}, [ctxState.token])
return (
<AuthContext.Provider value={state}>{children}</AuthContext.Provider>
)
/*************/
/* InnerContext.tsx */
export const InnerContext = React.createContext<InnerCtxState>(defaultState);
export const InnerContextProvider = (children: React.ReactNode) => {
const [state, setState] = React.useState<InnerCtxState>(retrieveFromStorage());
const {token} = React.useContext(AuthContext);
const updateState = React.useCallback((key: string) => {
authAxios.get() /* fetch request here */
}, [token]);
React.useEffect(() => {
if (token) {
updateState("foo");
}
}, [token, updateState])
return (
<InnerContext.Provider value={state}>{children}</InnerContext.Provider>
)
}
/*************/
/* App.tsx */
const App = () => {
return (
<AuthContextProvider>
<InnerContextProvider>
<Router/>
</InnerContextProvider>
</AuthContextProvider>
)
}
I've tried to attach the token to authAxios from localStorage directly, but even that doesn't seem to do the trick.
The interim workaround I'm using is to force reload through window.location.reload() in logoutHandler() in AuthContext
Thanks in advance.