Кнопка реакции на окончательную форму не отключена при отправке

Я делаю приложение для реагирования, и одной из функций является создание информации о клиенте. Я создал необходимые компоненты, как вы увидите в фрагментах кода ниже. Я также использую react redux для управления состоянием и firestore в качестве серверной части и базы данных.

В форме (окончательная форма) я указываю, что кнопка отключена при отправке формы, однако кнопка кажется не отключенной, и это может привести к созданию нескольких записей при многократном нажатии кнопки.

Итак, подводя итог, я хотел бы добиться того, чтобы при нажатии кнопки для отправки нового клиента, ожидая выполнения обещания, кнопка должна быть отключена, чтобы люди не нажимали ее несколько раз.

Вот код:

/* Client Form Component */

const ClientForm = ({onSubmit}) => {

  const submitForm = (formValues) => {
    onSubmit(formValues);
  };

  const Condition = ({ when, is, children }) => (
    <Field name = {when} subscription = {{ value: true }}>
      {({ input: { value } }) => (value === is ? children : null)}
    </Field>
  )

  return (
    <Form 
      onSubmit = {submitForm}
      render = {({handleSubmit, submitting, pristine, reset}) => {
        return (
          <form onSubmit = {handleSubmit}>
            <div className='container-fluid g-4'>
                ...
              <div className='row'>
                <div className='col-12 g-4'>
                  <button 
                    type = "submit" 
                    className='btn btn-primary'
                    disabled = {submitting || pristine }
                  >Submit</button>
                </div>
              </div>
            </div>
                        
          </form>
        )
      }}
    />
  )

}
export default ClientForm;

/* Client Add Component */

import { createClient } from  ...

const ClientAdd = (props) => {

  const dispatch = useDispatch();

  const onSubmit = (formValues) => {
    dispatch(createClient(formValues, props.history));
  };

  return (
    <ClientForm onSubmit = {onSubmit}/>
  );
};

export default ClientAdd;

/* createClient action crator */

export const createClient = (
    {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      coordinator,
      coordinatorEmail,
      coordinatorContactNumber,
      coordinatorCompany,
      planManager,
      planManagerEmail,
    }, pathHistory) => async (dispatch) => {
  const docRef = collection(db, 'clients');

  let formValuesToSubmit = {}

  if (planManagementType === "NDIS Management") {
    formValuesToSubmit = {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      coordinator,
      coordinatorEmail,
      coordinatorContactNumber,
      coordinatorCompany,
    }
  } else if (planManagementType === "Plan Management") {
    formValuesToSubmit = {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      planManager,
      planManagerEmail,
    }
  }

  await addDoc(docRef, formValuesToSubmit);

  pathHistory.push('/client-list');

};