Using state in axios interceptors

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!