I have following code

import {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";
import { request } from "http";

const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
    console.log('in-2')
    console.info(`[request] [${JSON.stringify(config)}]`);
    config = {...config,baseURL :"https://api.test.com",headers: { ...config.headers,...{'Authorization':"token"} } }
    return config;
}
//process.env.REACT_API_URL

const onRequestError = (error: AxiosError): Promise<AxiosError> => {
    console.error(`[request error] [${JSON.stringify(error)}]`);
    return Promise.reject(error);
}

const onResponse = (response: AxiosResponse): AxiosResponse => {
    console.info(`[response] [${JSON.stringify(response)}]`);
    return response;
}

const onResponseError = (error: AxiosError): Promise<AxiosError> => {
    console.error(`[response error] [${JSON.stringify(error)}]`);
    return Promise.reject(error);
}

export function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
    console.log('in',axiosInstance)
    axiosInstance.interceptors.request.use(onRequest,onRequestError  );
    axiosInstance.interceptors.response.use(onResponse, onResponseError);
    return axiosInstance;
}

then

import {setupInterceptorsTo} from "./Interceptors";
import axios from "axios";
setupInterceptorsTo(axios)
export default  axios.create();

But onRequest callback never executing

I also tried like

import {setupInterceptorsTo} from "./Interceptors";
import axios from "axios";
setupInterceptorsTo(axios)
export default  axios.create({baseURL :"https://api.test.com"});

But still neither onRequest or onRequestError callback working, as I am giving dummy API call which is throwing error on console.

I believe onRequest should be called before any request so that we can modify request, and onRequestError should be called if any error including 404,

Is my thinking wrong.

Please advise. Thanks