Перехватчик Axios не работает при инициализации в функции высшего порядка реагирования

Question

У меня есть Компонент, который заставляет axios получить

Component <using axios instance> {
   componentDidMount(){
    axios.get('myurl.jn').then(ingredients => { <wrong url>

    }).catch( error => {
      console.log(error) // dosent even show here as we donot propagate the error
    })
    }
}
export default hoc(Component,axiosInstance)

Компонент высшего порядка Funcfor

const ErrorHandler = (WrapperComponent, axios) => {
    return class extends Component {

        componentDidMount(){
            axios.interceptors.request.use(req => {
                console.log(req) // none
                this.setState({error : null});
                return req;
              });

            axios.interceptors.response.use(res => res,(error) => {
                console.log(error) // none
                this.setState({error : true});
              });
        }

Я попытался добавить регистратор и точки останова во все места в hoc, где используется экземпляр axios, но безрезультатно ничего не вызывается.

Единственное место, где перехватчик находится в месте, где я создаю экземпляр, почему и как мы решаем это. Консоль для браузера выдает 404, но не перехватывается перехватчиком.

Я очень новичок, чтобы реагировать, и я просто учусь на прошлой неделе, прошу прощения, если не следую каким-либо нормам