title: I want to transform value in Yup but Formik is not returning the correct value
body: <p>I have a value in a form (email) that I want to transform into lowercase. I have a transform in Yup that's working, but Formik does not show a lowercase value.</p>
  <p>How do I make it so that, when I enter the email in uppercase, it gets converted to lowercase automatically?</p>
  <p>Here is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import { Formik } from &quot;formik&quot;;
  import * as Yup from &quot;yup&quot;;
  
  import { DisplayFormikState } from &quot;./helper&quot;;
  import &quot;./style.css&quot;;
  
  const validationSchema = Yup.object({
    email: Yup.string()
      .transform(function (value, originalvalue) {
        return this.isType(value) &amp;&amp; value !== null ? value.toLowerCase() : value;
      })
      .email()
      .required()
      .label(&quot;Email&quot;)
  });
  
  const App = () =&gt; (
    &lt;div className=&quot;app&quot;&gt;
      &lt;Formik
        initialValues={{ name: &quot;&quot; }}
        onSubmit={() =&gt; {}}
        validationSchema={validationSchema}
      &gt;
        {(props) =&gt; {
          const { handleBlur, handleChange, values, errors, touched } = props;
          return (
            &lt;form onSubmit={props.handleSubmit}&gt;
              &lt;h1&gt;Email Form&lt;/h1&gt;
  
              &lt;input
                type=&quot;email&quot;
                name=&quot;email&quot;
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.email}
              /&gt;
              {errors.email &amp;&amp; touched.email &amp;&amp; errors.email}
  
              &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  
              &lt;DisplayFormikState {...props} /&gt;
            &lt;/form&gt;
          );
        }}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
  
  render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>