title: React formik form validation: How to initially have submit button disabled
body: <p>Below is my <code>React</code> form validation code in which I am using <code>formik</code>. By default when the form loads, I want to keep the submit button disabled:</p>
  
  <pre><code>import { useFormik } from "formik";
  import * as Yup from "yup";
  
  const formik = useFormik({
      initialValues: {
        firstName: "",
        lastName: "",
        email: ""
      },
      validationSchema: Yup.object({
        firstName: Yup.string()
          .max(15, "Must be 15 characters or less")
          .min(3, "Must be at least 3 characters")
          .required("Required"),
        lastName: Yup.string()
          .min(3, "Must be at least 3 characters")
          .max(20, "Must be 20 characters or less")
          .required("Required"),
        email: Yup.string()
          .email("Invalid email address")
          .required("Required")
      }),
      onSubmit: values =&gt; {
        handleSubmit(values);
      }
    });
  </code></pre>
  
  <p>I have tried to use this on my button:</p>
  
  <pre><code> disabled={!formik.isValid}
  </code></pre>
  
  <p>But it only actually works if I try to submit the form. So, if I leave the form blank and hit submit, all the validation errors show up and then the button is disabled. But, it should be disabled already from the start. I checked the <a href="https://jaredpalmer.com/formik/docs/overview" rel="noreferrer">documentation</a> but didn't see anything obvious there.</p>