title: Submit button in react form not submitting
body: <p>I am trying to make a registration form using React.js and Formik. My submit button displays correctly but when I try to submit the information by clicking on the submit button nothing happens. Please advise how I can fix this. Thanks in advance.</p>
  <p>RegistrationForm.js:</p>
  <pre><code>import React from 'react';
  import { Formik, Form } from 'formik';
  import * as yup from 'yup';
  import FormikControl from './FormikControl';
  import classes from './Registration.module.css';
  
  function Registrationform() {
    const options = [
      { key: 'Email', value: 'emailmoc' },
      { key: 'Telephone', vlaue: 'telephonemoc' }
    ];
  
    const initialValues = {
      email: '',
      password: '',
      confirmPassword: '',
      modeOfContact: '',
      phone: ''
    };
  
    const validationSchema = yup.object({
      email: yup.string().email('Invalid email format').required('Required'),
      password: yup.string().required('Required'),
      confirmPassword: yup
        .string()
        .oneOf([yup.ref('password'), ''], 'Passwords must match')
        .required('required'),
      modeOfContact: yup.string().required('Required'),
      phone: yup.string().when('modeOfContact', {
        is: 'telephonemoc',
        then: yup.string().required('Required')
      })
    });
  
    const onSubmit = (values) =&gt; {
      console.log('Form data', values);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Registration&lt;/h1&gt;
  
        &lt;Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}
        &gt;
          {(formik) =&gt; {
            return (
              &lt;Form className={classes.Registrationform}&gt;
                &lt;FormikControl
                  control=&quot;input&quot;
                  type=&quot;email&quot;
                  label=&quot;Email&quot;
                  name=&quot;email&quot;
                /&gt;
  
                &lt;FormikControl
                  control=&quot;input&quot;
                  type=&quot;password&quot;
                  label=&quot;Password&quot;
                  name=&quot;password&quot;
                /&gt;
  
                &lt;FormikControl
                  control=&quot;input&quot;
                  type=&quot;password&quot;
                  label=&quot;Confirm Password&quot;
                  name=&quot;confirmPassword&quot;
                /&gt;
  
                &lt;FormikControl
                  control=&quot;input&quot;
                  type=&quot;text&quot;
                  label=&quot;Phone number&quot;
                  name=&quot;phone&quot;
                /&gt;
  
                &lt;label&gt;Mode of Contact&lt;/label&gt;
  
                &lt;div className=&quot;radio&quot;&gt;
                  &lt;label&gt;
                    &lt;input type=&quot;radio&quot; value=&quot;Phone&quot; options={options} /&gt;
                    Phone
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div className=&quot;radio&quot;&gt;
                  &lt;label&gt;
                    &lt;input type=&quot;radio&quot; value=&quot;Email&quot; options={options} /&gt;
                    Email
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;button type=&quot;submit&quot; disabled={!formik.isValid}&gt;
                  Submit
                &lt;/button&gt;
              &lt;/Form&gt;
            );
          }}
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  
  export default Registrationform;
  </code></pre>
  <p>Registration.module.css:</p>
  <pre><code>  .Registrationform{
          margin:auto;
          padding-top: 50px;
          width:360px;
           
      }
      
      .Registrationform &gt; label {
       
          font-weight: bold;
          display: flex;
          margin-bottom: 10px;
         
          font-size: 18px;
        }
        
        .Registrationform &gt; input  {
         margin-bottom: 10px;
          font-weight: bold;
          display: inline-flex;
          margin-right: 20px;
          border-radius: 6px;
          outline:none;
          border: none;
          border: 1px solid #1E90FF;
         
        }
      
      
        .Registrationform &gt; button{
          margin-top: 10px;
          width: 425px;
          height: 35px;
          border-radius: 6px;
          outline:none;
          border: none;
          border: 1px solid #1E90FF;
          background-color: #1E90FF;
          color: white;
          font-size: 18px;
      
        }
      
        h1{
          margin-top: 50px;
          margin-bottom: 0;
          padding-bottom: 0;
        }
  </code></pre>
  <p>FormikContainer:</p>
  <pre><code>import React from 'react';
  import { Formik, Form } from 'formik';
  import * as Yup from 'yup';
  import FormikControl from './FormikControl';
  
  function FormikContainer() {
    const initialValues = {
      email: '',
      password: ''
    };
    const validationschema = Yup.object({
      email: Yup.string().required('Required')
    });
    const onSubmit = (values) =&gt; console.log('Form data', values);
  
    return (
      &lt;div&gt;
        &lt;Formik
          initialValues={initialValues}
          validationschema={validationschema}
          onSubmit={onSubmit}
        &gt;
          {(formik) =&gt; (
            &lt;Form&gt;
              &lt;FormikControl
                control=&quot;input&quot;
                type=&quot;email&quot;
                label=&quot;Email&quot;
                name=&quot;email&quot;
              /&gt;
  
              &lt;FormikControl
                control=&quot;input&quot;
                type=&quot;password&quot;
                label=&quot;Password&quot;
                name=&quot;password&quot;
              /&gt;
  
              &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
            &lt;/Form&gt;
          )}
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  
  export default FormikContainer;
  </code></pre>
  <p>FormikControl:</p>
  <pre><code>import React from 'react';
  
  function FormikControl({ control, id, label, ...rest }) {
    return (
      &lt;&gt;
        {control === 'input' &amp;&amp; &lt;label htmlFor={id}&gt;{label}&lt;/label&gt;}
        &lt;input id={id} {...rest} /&gt;
      &lt;/&gt;
    );
  }
  
  export default FormikControl;
  </code></pre>
  <p>App.js:</p>
  <pre><code>import React from 'react';
  import './App.css';
  import FormikContainer from './components/FormikContainer';
  import LoginForm from './components/LoginForm';
  import Registrationform from './components/RegistrationForm';
  
  function App() {
    return (
      &lt;div&gt;
        &lt;LoginForm /&gt;
        &lt;Registrationform /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>