title: Why is my Formik form not submitting when I have no validation?
body: <p>I'm working on building a registration form using Semantic UI React and Formik.</p>
  <p>No matter what I've tried, I am unable to get the <code>onSubmit</code> event to trigger upon attempting to submit the form, even though I've temporarily disabled form validation.</p>
  <p>I'm simply trying to just <code>console.log()</code> a message, not even worried about the form's values at this time.</p>
  <p>As far as I can see, it should be working...but I've also noticed that initial values are not being populated from that variable either.</p>
  <p>I noticed at some point someone else had developed a wrapper for Semantic UI React to combine the functionality of both libraries, but didn't have much luck with that either (unless I was also using that incorrectly).</p>
  <p>Should I just ditch the <code>&lt;Formik /&gt;</code> component (even though it seems to be the most optimal way to use it) and adopt the React hook implementation instead?</p>
  <p>I'm at a loss, not sure what I'm doing wrong unless it's an oversight.</p>
  <p><strong>RegisterForm.tsx (component)</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { Grid, Button, Form } from 'semantic-ui-react';
  import { Formik } from 'formik';
  // import * as Yup from 'yup';
  
  // Interface
  import { RegisterData } from '../../interfaces/RegisterData';
  
  // Component
  export const RegisterForm = () =&gt; {
  
      const initValues: RegisterData = {
          given_name: 'Test',
          family_name: 'Test2',
          email: '',
          phone: '',
          username: '',
          password: '',
          confirm_password: '',
          agreeTOS: false
      };
  
      // const validationSchema = Yup.object({
      //     given_name: Yup.string().max(20, &quot;Must be 20 characters or less!&quot;).required(&quot;Required!&quot;),
      //     family_name: Yup.string().max(20, &quot;Must be 20 characters or less!&quot;).required(&quot;Required!&quot;),
      //     email: Yup.string().email(&quot;Invalid e-mail address!&quot;).required(&quot;Required!&quot;),
      //     phone: Yup.string().matches(/^[+]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/i, &quot;Invalid phone number!&quot;)
      //         .min(8, &quot;Must be at least  8 digits!&quot;).max(15, &quot;Must be 15 digits or less!&quot;).required(),
      //     password: Yup.string().min(8, &quot;Must be at least 8 characters!&quot;).required(),
      //     confirm_password: Yup.string().oneOf([Yup.ref('password')], &quot;Passwords do not match!&quot;).required(&quot;Required!&quot;),
      //     agreeTOS: Yup.boolean().oneOf([true], &quot;Terms must be accepted!&quot;).required(&quot;Terms must be accepted!&quot;)
      // })
  
      // const handleSubmit = async (values: RegisterData) =&gt; {
      //     setTimeout(() =&gt; {
      //         console.log(&quot;Values: &quot;, values);
      //     }, 2000);
      // }
  
      return (
          &lt;Grid.Row&gt;
              &lt;Grid.Column width={10}&gt;
                  &lt;Formik
                      onSubmit={() =&gt; { console.log('test'); }}
                      initialValues={initValues}
                  &gt;
                      {({ isSubmitting }) =&gt; (
                          &lt;Form&gt;
                              &lt;Grid&gt;
                                  &lt;Grid.Row&gt;
                                      &lt;Grid.Column width={16}&gt;
                                          &lt;Form.Group widths=&quot;equal&quot;&gt;
                                              &lt;Form.Input name=&quot;given_name&quot; label=&quot;First Name&quot; fluid /&gt;
                                              &lt;Form.Input name=&quot;family_name&quot; label=&quot;Last Name&quot; fluid /&gt;
                                          &lt;/Form.Group&gt;
                                      &lt;/Grid.Column&gt;
                                  &lt;/Grid.Row&gt;
                                  &lt;Grid.Row&gt;
                                      &lt;Grid.Column width={8}&gt;
                                          &lt;Button type=&quot;submit&quot; color=&quot;orange&quot; fluid loading={isSubmitting}&gt;Submit Form&lt;/Button&gt;
                                      &lt;/Grid.Column&gt;
                                      &lt;Grid.Column width={8}&gt;
                                          &lt;Button type=&quot;submit&quot; color=&quot;grey&quot; fluid&gt;Submit Form&lt;/Button&gt;
                                      &lt;/Grid.Column&gt;
                                  &lt;/Grid.Row&gt;
                              &lt;/Grid&gt;
                          &lt;/Form&gt;
                      )}
  
                  &lt;/Formik&gt;
              &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
      )
  }
  </code></pre>
  <p><strong>RegisterData.ts (interface to hold form data)</strong></p>
  <pre class="lang-js prettyprint-override"><code>export interface RegisterData {
      email: string;
      phone: string;
      username: string;
      given_name: string;
      family_name: string;
      password: string;
      confirm_password: string;
      agreeTOS: boolean;
  }
  </code></pre>
  <p>Thanks in advance for any assistance!   I'm really confused, I feel like I probably overlooked something here, but I don't know what it could be.</p>