Cache Interceptor Caching All APIs and Not Returning Fresh Data

[ParthSST]

const AxiosInstance = axios.create({ /* headers */ });
const AxiosCacheInstance = axios.create({ /* same headers */ });

// Add interceptors to BOTH
AxiosInstance.interceptors.request.use(...);
AxiosInstance.interceptors.response.use(...);

AxiosCacheInstance.interceptors.request.use(...);
AxiosCacheInstance.interceptors.response.use(...);

// Now only cache AxiosCacheInstance
export const CacheAxiosInstance = setupCache(AxiosCacheInstance, {
  methods: ['get', 'post'],
  interpretHeader: false,
  storage: asyncStorageCache,
  debug: console.log,
});

export default AxiosInstance;

I am using a cache interceptor to cache specific URLs in my application. However, when I implement it like above code, it is caching all the APIs in the app, not just the ones I intend to cache. Also, it always returns the cached data, even when there is an active internet connection and new data is available from the API.

I have tried multiple approaches (even consulting AI tools), but I haven't been able to solve it. Could someone please help me with this?

Here is the exact behavior I want to achieve:

1. On the first API call, check if cached data exists and return it immediately to update the UI.
2. In the background, fetch updated data from the server and refresh the UI with this new data.
3. Replace the old cached response with the newly fetched response.

One more question — do I need to create a new instance for caching APIs?