Untitled

const [disabledSubmitBtn, setDisabledSubmitBtn] = useState(false);
const formik = useFormik({
    initialValues: {
      fullName: '',
      email: '',
      detail: '',
    },
    validationSchema: Yup.object().shape({
      fullName: Yup.string()
        .matches(
          /^[\u0600-\u06FF\s]+$/,
          'لطفا نام و خانوادگی خود را به فارسی بنویسید!',
        )
        .min(4, 'نام و نام خانوادگی باید حداقل 4 کاراکتر باشد!')
        .max(30, 'نام و نام خانوادگی میتواند حداکثر 30 کاراکتر باشد!')
        .required('این فیلد اجباری است!'),
      email: Yup.string()
        .email('لطفا یک ایمیل معتبر وارد کنید!')
        .required('این فیلد اجباری است!'),,
    }),
    onSubmit: async (values) => {
      setDisabledSubmitBtn(true);
      // fetch api ...
    },
});

return (
    <form
        onSubmit={formik.handleSubmit}
    >
        <div>
            <label>نام و نام خانوادگی *</label>
            <input
              spellCheck={false}
              disabled={disabledSubmitBtn}
              type={'text'}
              {...formik.getFieldProps('fullName')}
              className={{
                formik.errors.fullName && formik.touched.fullName
                  ? '!border-red-400'
                  : 'focus-within:border-[#adadad]'
              }
            />
            {formik.errors.fullName && formik.touched.fullName ? (
              <p>
                {formik.errors.fullName}
              </p>
            ) : null}
        </div>
        <div>
            <div>
              <label>ایمیل *</label>
              <input
                type={'text'}
                spellCheck={false}
                {...formik.getFieldProps('email')}
                className={{
                  formik.errors.email && formik.touched.email
                    ? '!border-red-400'
                    : 'focus-within:border-[#adadad]'
                }
              />
              {formik.errors.email && formik.touched.email ? (
                <p>
                  {formik.errors.email}
                </p>
              ) : null}
            </div>
        </div>
        <button
            type="submit"
            disabled={disabledSubmitBtn}
            className={{
              disabledSubmitBtn ? 'opacity-90' : 'opacity-100'
            }
          >
            {disabledSubmitBtn ? (
              <ThreeDots width="40" radius="9" color="#fff" />
            ) : (
              'ثبت و ارسال'
            )}
        </button>
    </form>    
)