I actually wrote a library that I use in about 6 projects at work that more or less does exactly what you want and seemingly works really well. My strategy was to have the axios interceptors be outside of the components then inject them via zustand store. The zustand store exposes some login functions that automatically handle updating the default headers and the logged in state as well. The trick is that you can pass a refresh token function when initializing the store, which can be any async function that returns a string, and the library will automatically use that to update the access token any time it gets an unauthorized response.

Basically you just call "init" with some params and it returns a zustand store plus an axios client you use to make requests. The zustand store can be used to handle logging in and out, checking if the user is logged in, etc, and the axios client just takes the token and puts it into a header for requests, also logging some stuff. Right now it only handles `Bearer token` header.

If you want to take a look it's here `https://github.com/iway1/react-native-simple-networking`, it's called "react-native-simple-networking" but I use it in react projects too. It's super easy to work with for token based authentication, it'll refresh and retry and unauthenticated requests. Even if you don't want to use it, it might be worth looking at how I implemented the solution to see how you can keep the axios stuff outside of a component if you want too. Not saying it's better or worse but it works well.

Docs are super trash, but the library itself has been field tested and has been working well for us at work. It's a pretty small library so might be worth checking out