title: Change < Formik > to useFormik
body: <p>I am using Formik/Yup for a validation of a page, which calls a GraphQL mutation. My code works fully:</p>
  
  <pre><code>export default function RemoveUserPage() {
    const [isSubmitted, setIsSubmitted] = useState(false);
    const [isRemoved ,setIsRemoved] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
  
    const [removeUser] = useMutation(RemoveUserMutation);
  
    function submitForm(email: string) {
      setIsSubmitted(true);
      removeUser({
          variables: {
              email: email,
          },
      }).then(({ data }: any) =&gt; {
        setIsRemoved(true);
        console.log('info: ', data.deleteUser);
      })
      .catch((error: { message: string; }) =&gt; {
        setIsRemoved(false);
        console.log("Error msg:" + error.message);
        setErrorMessage(error.message)
      })
    }
  
    return (
      &lt;div&gt;
        &lt;PermanentDrawerLeft&gt;&lt;/PermanentDrawerLeft&gt;
        &lt;Formik
          initialValues={{ email: '' }}
          onSubmit={(values, actions) =&gt; {
            setTimeout(() =&gt; {
              alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false);
            }, 1000);
          }}
          validationSchema={schema}
        &gt;
          {props =&gt; {
            const {
              values: { email },
              errors,
              touched,
              handleChange,
              isValid,
              setFieldTouched
            } = props;
            const change = (name: string, e: any) =&gt; {
              e.persist();
              handleChange(e);
              setFieldTouched(name, true, false);           
            };
            return (
              &lt;div className='main-content'&gt;
                &lt;form style={{ width: '100%' }}
                 onSubmit={e =&gt; {e.preventDefault();submitForm(email)
                  }}&gt;
                  &lt;div&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="email"
                      name="email"
                      helperText={touched.email ? errors.email : ""}
                      error={touched.email &amp;&amp; Boolean(errors.email)}
                      label="Email"
                      value={email}
                      onChange={change.bind(null, "email")}
                    /&gt;
                    &lt;br&gt;&lt;/br&gt;
                    &lt;Button
                    type="submit"
                    disabled={!isValid || !email}
                    &gt;
                      Remove User&lt;/Button&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
                &lt;br&gt;&lt;/br&gt;
                {isSubmitted &amp;&amp; StatusMessage(isRemoved, errorMessage)}
              &lt;/div&gt;
            )
          }}
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>However, now I want to use <code>useFormik</code> hook instead of <code>&lt;Formik&gt;</code> and I am unable to do so. I have seen the following example but I just can't figure out how exactly I could syntactically use it in my case since I am using material ui components instead of formic-specific inputs.</p>
  
  <p><a href="https://jaredpalmer.com/formik/docs/api/useFormik" rel="nofollow noreferrer">https://jaredpalmer.com/formik/docs/api/useFormik</a></p>
  
  <p>Edit:</p>
  
  <p>This compiles and all but there's no validation happening on the textfields. What am I missing?</p>
  
  <pre><code>export const schema = Yup.object({
    email: Yup.string()
      .email('Invalid Email')
      .required('This Field is Required'),
  });
  
  
  export default function RemoveUserPage() {
    const [isSubmitted, setIsSubmitted] = useState(false);
    const [isRemoved, setIsRemoved] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
  
    const [removeUser] = useMutation&lt;DeleteUserResponse&gt;(REMOVE_USER);
  
    let submitForm = (email: string) =&gt; {
      setIsSubmitted(true);
      removeUser({
        variables: {
          email: email,
        },
      })
        .then(({ data }: ExecutionResult&lt;DeleteUserResponse&gt;) =&gt; {
          if (data !== null &amp;&amp; data !== undefined) {
            setIsRemoved(true);
            console.log('info: ', data.deleteUser);
          }
        })
        .catch((error: { message: string }) =&gt; {
          setIsRemoved(false);
          console.log('Error msg:' + error.message);
          setErrorMessage(error.message);
        });
    };
  
    const formik = useFormik({
      initialValues:{ email: '' },
      onSubmit:(values, actions) =&gt; {
         setTimeout(() =&gt; {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
            }, 1000);
          },
         validationSchema:{schema}
      })
  
      const handleChange = (e: ChangeEvent&lt;HTMLInputElement&gt;)=&gt;{
        const {name,value} = e.target;
        formik.setFieldValue(name,value);
       }
  
    return (
      &lt;div&gt;
        &lt;PermanentDrawerLeft&gt;&lt;/PermanentDrawerLeft&gt;
              &lt;Wrapper&gt;
                &lt;Form
                  onSubmit={e =&gt; {
                    e.preventDefault();
                    submitForm(formik.values.email);
                  }}&gt;
                  &lt;div&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="email"
                      name="email"
                      helperText={formik.touched.email ? formik.errors.email : ''}
                      error={formik.touched.email &amp;&amp; Boolean(formik.errors.email)}
                      label="Email"
                      value={formik.values.email}
                      //onChange={change.bind(null, 'email')}
                      onChange={handleChange}
                    /&gt;
                    &lt;br&gt;&lt;/br&gt;
                    &lt;CustomButton
                      disabled={!formik.values.email}
                      text={'Remove User'}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Form&gt;
                &lt;br&gt;&lt;/br&gt;
                {isSubmitted &amp;&amp; StatusMessage(isRemoved, errorMessage)}
                &lt;/Wrapper&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>It gave me this error:</p>
  
  <pre><code>TypeError: schema[sync ? 'validateSync' : 'validate'] is not a function. (In 'schema[sync ? 'validateSync' : 'validate'](validateData, {
      abortEarly: false,
      context: context
    })', 'schema[sync ? 'validateSync' : 'validate']' is undefined)
  </code></pre>
  
  <p>Secondly, earlier on, I was using <code>isValid</code>for the button but now it gives an error. Is there an alternative?</p>