Disabling a form button while there's an http request running

I have a form built with react, formik and yup, and this form has some async validations. Apparently, some users were able to bypass these validations, and to prevent some errors, I wanted to disable the submit button when there's 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 where I used the useEffect hook to set a state in case there's an http request running, and the way I'm detecting this is what I wanted your opinion.

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 (
    <form
      className="form-horizontal"
      onSubmit={e => {
        props.handleSubmit(e);
      }}
    >
      {props.settings.bonuscode && (
        <fieldset>
          <Input
            id="marketing.bonus_code"
            {...props.user.marketing.bonus_code}
            {...props}
            classNameLabel="col-md-5"
            classNameInput="col-md-7"
          />
        </fieldset>
      )}

      <button
        id="wordreg-form-submit"
        type="submit"
        disabled={props.settings.formSubmited || disableSubmitBtn}
      >
        Submit
      </button>
    </form>
  );
};

export default Form;

So what matters is actually the code inside the useEffect hook. Whad do you think about it? Is it ok to check for pending http requests this way?