This is my axios-hoook.js and I am using axios-hooks package.

import useAxios from 'axios-hooks';
import axios from 'axios';
import LocalStorageService from './services/local-storage.service';
import refreshToken from './refresh-token';

axios.defaults.baseURL = 'http://localhost:3000/api/v1';
axios.defaults.transformResponse = [
  (responseData) => {
    const { data, error } = JSON.parse(responseData);
    return error || data;
  },
];

// request interceptor to add token to request headers
axios.interceptors.request.use(
  async (config) => {
    const token = LocalStorageService.getAccessToken();
    if (token) {
      config.headers = {
        authorization: token,
      };
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// response interceptor intercepting 401 responses, refreshing token and retrying the request
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { config } = error;
    if (error.response?.status === 401 && !config._retry) {
      config._retry = true;
      refreshToken(LocalStorageService.getRefreshToken())
        .then((res) => {
          const { accessToken } = res.data.data;
          LocalStorageService.setAccessToken(accessToken);
          return axios(config);
        })
        .catch((err) => {
          if (err.response.status === 401) {
            LocalStorageService.setUser(null);
            window.location.href = '/login';
          }
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

export default useAxios;

This is the Course.jsx where it is being used.

const Course = () => {
const [{ data: courses = [] }, refetchCourse] = axiosHook(ApiConfig.COURSE.GET_COURSES.url);

return (
  <Datatable
    entity={entity}
    columns={courseColumns}
    rows={courses}
    deleteRow={handleDeactivate}
    viewRow={handleView}
  />
 )
}

Image