title: Formik OnSubmit Not Getting Triggered
body: <p>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.</p>
  <p>I have an almost similar setup on another component and that works fine. Any help is appreciated.</p>
  <p>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.</p>
  <pre><code>&lt;Segment&gt;
          &lt;Formik
            initialValues={{
              comments: &quot;&quot;,
              mk1: &quot;&quot;,
              mk2: &quot;&quot;,
              mk3: &quot;&quot;,
              mk4: &quot;&quot;,
              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 }) =&gt; {
              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 });
              }
            }}
          &gt;
            {({ isSubmitting, isValid, dirty, errors, values }) =&gt; (
              &lt;Form className='ui form'&gt;
                &lt;TextArea
                  name='comments'
                  placeholder='Enter Comments Here'
                  rows={10}
                /&gt;
                &lt;Grid&gt;
                  &lt;Grid.Column width={14}&gt;
                    &lt;TextInput name='mk1' placeholder='Enter Marking Key 1' /&gt;
                    &lt;TextInput name='mk2' placeholder='Enter Marking Key 2' /&gt;
                    &lt;TextInput name='mk3' placeholder='Enter Marking Key 3' /&gt;
                    &lt;TextInput name='mk4' placeholder='Enter Marking Key 4' /&gt;
                  &lt;/Grid.Column&gt;
                  &lt;Grid.Column width={2}&gt;
                    &lt;TextInput name='mk1Num' type='number' /&gt;
                    &lt;TextInput name='mk2Num' type='number' /&gt;
                    &lt;TextInput name='mk3Num' type='number' /&gt;
                    &lt;TextInput name='mk4Num' type='number' /&gt;
                  &lt;/Grid.Column&gt;
                &lt;/Grid&gt;
  
                {errors.err &amp;&amp; (
                  &lt;Label
                    basic
                    color='red'
                    style={{ marginBottom: 10 }}
                    content={errors.err}
                  /&gt;
                )}
                &lt;br /&gt;
                &lt;Button
                  loading={isSubmitting}
                  disabled={!isValid || !dirty || isSubmitting}
                  type='submit'
                  fluidsize='large'
                  color='teal'
                  content='Submit'
                /&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/Segment&gt;
  </code></pre>
  <p>Also, i am using Semantic UI react for styling.</p>