Why is my state not being updated in my callbacks? - reactjs

Question

I'm trying to understand the state in React, having a background with Vue.js.
I'm building a login which fetches a JWT-token, then stores the token in a global store so we can use it for subsequent API-calls. I'm using an axios interceptor to resolve the token from the store. However, the token is always an old version/from previous render.
I've read about the React lifecycle but this function is not used in the rendering. It's used as a callback. I understand that setting the state is async. I've tried wrapping the interceptor in a useEffect(.., [tokenStore.token]) and using setTimeout(). I feel like I'm missing something.
Why is my state not being updated in my callbacks? Am I going about this in an non-idiomatic way?
Usage:
<button onPress={() => loginWithToken('abc')}>
Sign In
</button>
User hook:
export function useUserState() {
const api = useApi();
function loginWithToken(token) {
tokenState.setToken(token);
api
.request('get', 'currentUser')
.then((data) => {
console.log(data);
})
.catch((errors) => {
console.log(errors);
});
}
}
The api:
export default function useApi(hasFiles = false) {
const tokenState = useTokenState();
const client = axios.create(/*...*/);
client.interceptors.request.use(function (config) {
config.headers!.Authorization = tokenState.token
? `Bearer ${tokenState.token}`
: '';
return config;
});
// ...
}
Token store using hookstate:
const tokenState = createState({
token: null,
});
export function useTokenState() {
const state = useState(tokenState);
return {
token: state.token.get(),
setToken: (token: string | null) => {
console.log('setToken: ' + token);
state.set({ token });
},
};
}

Answer 1

I solved it by updating the defaults instead:
setToken: token => {
apiClient.defaults.headers.Authorization = token
? `Bearer ${token}`
: undefined;
// ...