The Formik handleSubmit function appears to be non-functional when attempting to initiate the submission process by clicking the submit button

Question

In this component, I created a form using Formik a few days ago, and it was functioning correctly. However, today I noticed that it is no longer operational. Upon investigation, I discovered that the handleFormSubmit function is not being triggered when the submit button is clicked. Here's the code for the component:

const UpdateUser = ({ user, open, handleClose }) => {

   const isNonMobile = useMediaQuery("(min-width:600px)");

   const dispatch = useDispatch();
   const [initialValues, setInitialValues] = useState(initialState);

   const { loading, error, userCreated } = useUser();

   // fetch the selected user's data   
   useEffect(() => {
      const formattedResponse = {
         ...user,
         birthday: dateFormat(user?.birthday),
         contractStartDate: dateFormat(user?.contractStartDate),
         contractEndDate: dateFormat(user?.contractEndDate),
      };
      setInitialValues(formattedResponse);
   }, [user]);

   const handleFormSubmit = async (values, { setSubmitting }) => {

      console.log("asslema");
      const dataForRequest = {
         ...values,
         "roles": [ROLE_FOR_POSTE[values.jobTitle]],
      };
      try {
         dispatch(userUpdate(dataForRequest, user.id));
         console.log("besslema");
         setSubmitting(false);
      } catch (error) {
         console.error("Error:", error);
         setSubmitting(false);
      }

   };

   return (
      <Dialog maxWidth='md' fullWidth open={open} onClose={handleClose}>
         <DialogTitle>
            <Header title="Modification" subtitle="Effectuer les ajustements requis pour cet utilisateur." />
         </DialogTitle>
         <DialogContent>
            {
               userCreated || error ?
                  <Alert
                     severity={error ? "error" : "success"}
                     action={
                        <Button size="sm" variant="solid" color="inherit" onClick={handleClose}>
                           Close
                        </Button>
                     }
                  >
                     {
                        !error ?
                           "La mise à jour de l'utilisateur a été effectuée avec succès."
                           :
                           "La mise à jour de l'utilisateur a échoué."
                     }
                  </Alert>
                  :
                  loading ?
                     <Box sx={{ height: '400px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <CircularProgress color='success' size={100} />
                     </Box>
                     :
                     <Box m="20px">
                        <Formik
                           onSubmit={handleFormSubmit}
                           initialValues={initialValues}
                           validationSchema={userSchema}
                        >
                           {({
                              values,
                              errors,
                              touched,
                              handleBlur,
                              handleChange,
                              handleSubmit,
                           }) => (
                              <form onSubmit={handleSubmit}>
                                 <Box
                                    display="grid"
                                    gap="30px"
                                    gridTemplateColumns="repeat(4, minmax(0, 1fr))"
                                    sx={{
                                       "& > div": { gridColumn: isNonMobile ? undefined : "span 4" },
                                    }}
                                 >
                                    <TextField
                                       fullWidth
                                       variant="filled"
                                       type="text"
                                       label="Nom"
                                       onBlur={handleBlur}
                                       onChange={handleChange}
                                       value={values.firstName}
                                       name="firstName"
                                       error={!!touched.firstName && !!errors.firstName}
                                       helperText={touched.firstName && errors.firstName}
                                       sx={{ gridColumn: "span 2" }}
                                    />
                                    <TextField
                                       fullWidth
                                       variant="filled"
                                       type="text"
                                       label="Prénom"
                                       onBlur={handleBlur}
                                       onChange={handleChange}
                                       value={values.lastName}
                                       name="lastName"
                                       error={!!touched.lastName && !!errors.lastName}
                                       helperText={touched.lastName && errors.lastName}
                                       sx={{ gridColumn: "span 2" }}
                                    />
                                    <TextField
                                       fullWidth
                                       variant="filled"
                                       type="number"
                                       label="Téléphone"
                                       onBlur={handleBlur}
                                       onChange={handleChange}
                                       value={values.phone}
                                       name="phone"
                                       error={!!touched.phone && !!errors.phone}
                                       helperText={touched.phone && errors.phone}
                                       sx={{ gridColumn: "span 2" }}
                                    />
....others input fields
                                 </Box>
                                 <Box mt="30px" display="flex" gap="10px" justifyContent="flex-end">
                                    <Button color="error" variant="outlined" onClick={handleClose}>Annuler</Button>
//this is the submit button
                                    <Button color="success" variant="outlined" type="submit" onClick={handleSubmit}>Enregistrer</Button>
                                 </Box>
                              </form>
                           )}
                        </Formik>
                     </Box>
            }
         </DialogContent>
      </Dialog >
   );
};

what's wrong here ?

correct the issue within the Formik form.