Formik OnSubmit Not Getting Triggered

I am working on a react project and i am using Formik for forms. For some reason, the onSubmit method doesnt get triggered. I have been trying to figure out where the error is but i have couldnt.

I have an almost similar setup on another component and that works fine. Any help is appreciated.

There are no issues with validation, because the button becomes enabled only if it satisfies the validation parameters. I click the submit button and nothing happens. I have tried debugging but its not even hitting the onSubmit method.

<Segment>
        <Formik
          initialValues={{
            comments: "",
            mk1: "",
            mk2: "",
            mk3: "",
            mk4: "",
            mk1Num: 0,
            mk2Num: 0,
            mk3Num: 0,
            mk4Num: 0,
          }}
          validationSchema={Yup.object({
            comments: Yup.string().required(),
            mk1: Yup.string().required(),
            mk2: Yup.string().required(),
            mk3: Yup.string().required(),
            mk4: Yup.string().required(),
            mk1Num: Yup.number().positive().max(5),
            mk2Num: Yup.number().positive().max(5),
            mk3Num: Yup.number().positive().max(5),
            mk4Num: Yup.number().positive().max(5),
          })}
          onSubmit={async (values, { setErrors, setSubmitting }) => {
            try {
              console.log(values);
              const totalGrade =
                values.mk1Num + values.mk2Num + values.mk3Num + values.mk4Num;
              await addToSubmittedAssignment(
                courseId,
                assignmentId,
                values,
                totalGrade
              );
              setSubmitting(false);
            } catch (error) {
              setErrors({ err: error.message });
            }
          }}
        >
          {({ isSubmitting, isValid, dirty, errors, values }) => (
            <Form className='ui form'>
              <TextArea
                name='comments'
                placeholder='Enter Comments Here'
                rows={10}
              />
              <Grid>
                <Grid.Column width={14}>
                  <TextInput name='mk1' placeholder='Enter Marking Key 1' />
                  <TextInput name='mk2' placeholder='Enter Marking Key 2' />
                  <TextInput name='mk3' placeholder='Enter Marking Key 3' />
                  <TextInput name='mk4' placeholder='Enter Marking Key 4' />
                </Grid.Column>
                <Grid.Column width={2}>
                  <TextInput name='mk1Num' type='number' />
                  <TextInput name='mk2Num' type='number' />
                  <TextInput name='mk3Num' type='number' />
                  <TextInput name='mk4Num' type='number' />
                </Grid.Column>
              </Grid>

              {errors.err && (
                <Label
                  basic
                  color='red'
                  style={{ marginBottom: 10 }}
                  content={errors.err}
                />
              )}
              <br />
              <Button
                loading={isSubmitting}
                disabled={!isValid || !dirty || isSubmitting}
                type='submit'
                fluidsize='large'
                color='teal'
                content='Submit'
              />
            </Form>
          )}
        </Formik>
      </Segment>

Also, i am using Semantic UI react for styling.

Try adding the submit method to Form render params:

{({ isSubmitting, submitForm, isValid, dirty, errors, values }) => (...

And then call it on submit button:

<Button
  loading={isSubmitting}
  disabled={!isValid || !dirty || isSubmitting}
  type='submit'
  fluidsize='large'
  color='teal'
  content='Submit'
  onClick={submitForm}
/>