Using state in axios interceptors - reactjs

Question

I'm trying to optimize performance of my app and was thinking about implementing axios interceptors.
And trying to do so, I run into problem that I can not understand.
Here is my App.js file:
function App() {
const Stack = createStackNavigator();
const initialLoginState = {
isLoading: true,
userToken: null,
};
const loginReducer = (prevState, action) => {
switch (action.type) {
case 'RETRIEVE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGIN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGOUT':
return {
...prevState,
userToken: null,
isLoading: false,
};
}
};
const [loginState, dispatch] = useReducer(loginReducer, initialLoginState);
const authContext = useMemo(
() => ({
signIn: async (userToken) => {
await setStoredItem('token', userToken);
dispatch({type: 'LOGIN', token: userToken});
},
signOut: async () => {
await deleteStoredItem('token');
dispatch({type: 'LOGOUT'});
},
}),
[],
);
useEffect(() => {
setTimeout(async () => {
let userToken = null;
let token = await getStoredItem('token');
if (token != undefined && token.length > 0) {
userToken = token;
}
dispatch({type: 'RETRIEVE_TOKEN', token: userToken});
}, 1000);
}, []);
axios.interceptors.request.use((config) => {
console.log(
'loginState.userToken INSIDE intercetor',
loginState.userToken,
);
// request.headers.Authorization = loginState.userToken ? `Bearer ${userToken}` : '';
return config;
});
console.log('state OUTSIDE intercetor', loginState.userToken);
As you can see I'm using useReducer react hook for Authentication state management and then I conditionally render routes depending if loginState.userToken !== null or not.
I was trying to add loginState.userToken to interceptor (commented out code) and then something weird happens - State value seem to change and I dont know why.
See screenshot below:
At first it accurate (actual token), but then it changes to null?
What am I missing here?
Thank you!