I have a state and reducer as so:

const [state, dispatch] = useReducer(reducer, initialAuthState);

I have a axios instance that I create like so:

const [client] = useState(() => {
const newAxios = axios.create();
newAxios.interceptors.request.use((config) => {
  const local = localStorage.getItem(TOKEN_LOCALSTORAGE_KEY);
  if (local === null) return config;
  const token = JSON.parse(local).access_token;
  if(!config.url?.includes(HOST_URL)) config.url = HOST_URL + config.url;
  if (token && config.headers !== undefined) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  dispatch({ type: "LOADING", value: true });
  return config;
});
newAxios.interceptors.response.use(
  (response) => {
    dispatch({ type: "LOADING", value: false });
    return response;
  },
  async (error) => {
    dispatch({ type: "LOADING", value: false });
    const originalRequest = error.config;
    if (error.response === undefined) return Promise.reject(error);
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      await refreshToken();
      return newAxios(originalRequest);
    }
    return Promise.reject(error);
  }
);
return newAxios;});

When I call the dispatch function to update the loading value it never updates and always remains the same, even if I use a standard variable with useState and update using setter it doesn't update either. What is going on?