javascript: disable a form button while executing an http request


I have a form built with react, formik and yup, and this form has some asynchronous validations. Apparently, some users were able to skip these validations, and to avoid some errors, I wanted to disable the submit button when there is a pending http request.

Many years ago, I used to handle this very easily with jQuery, but now, this is not the case.

I came up with a solution in which I used the useEffect link to establish a state in case an http request was executed, and the way I am detecting this is what your opinion wanted.

Basically:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Input } from '../../../../components/Formik';

const Form = props => {
  const (disableSubmitBtn, setDisableSubmitBtn) = useState(false);

  useEffect(() => {
    axios.interceptors.request.use(
      configs => {
        console.log('http req running');
        setDisableSubmitBtn(true);
        return configs;
      },
      error => {
        return Promise.reject(error);
      },
    );
    console.log('no http req running');
    setDisableSubmitBtn(false);
  }, (disableSubmitBtn));

  return (
    
{ props.handleSubmit(e); }} > {props.settings.bonuscode && (
)}
); }; export default Form;

So, what really matters is the code inside the useEffect hook. How about?
Is it okay to verify pending HTTP requests in this way?