title: React ref & Formik innerRef - current.values doesn't get updated
body: <p>I'm trying to use Formik in combination with React's <code>useRef</code> hook to create a reference to my form, which I can then access outside of that form. However, no matter what I do, the values in the ref are never updated like I expect them to.</p>
  <p>I've created a small example demonstrating the problem.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useRef, useMemo } from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import { Formik } from &quot;formik&quot;;
  
  const App = () =&gt; {
    const formRef = useRef();
  
    useEffect(() =&gt; {
      console.log(&quot;formRef changed&quot;, formRef.current);
    }, [formRef]);
  
    const email = useMemo(() =&gt; {
      if (formRef.current) {
        const email = formRef.current.values;
        return email;
      }
  
      return &quot;&lt;none&gt;&quot;;
    }, [formRef.current?.values]); //This dependency array was a test, I tried formRef and formRef.current separately aswell.
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;Formik
          innerRef={(f) =&gt; (formRef.current = f)}
          initialValues={{ email: &quot;asdf@test.com&quot; }}
          onSubmit={(values) =&gt; {
            console.log(values);
          }}
        &gt;
          {(props) =&gt; {
            const {
              values,
              isSubmitting,
              handleChange,
              handleReset,
              handleSubmit
            } = props;
            return (
              &lt;form onSubmit={handleSubmit}&gt;
                &lt;label htmlFor=&quot;email&quot; style={{ display: &quot;block&quot; }}&gt;
                  Email
                &lt;/label&gt;
                &lt;input
                  id=&quot;email&quot;
                  placeholder=&quot;Enter your email&quot;
                  type=&quot;text&quot;
                  value={values.email}
                  onChange={handleChange}
                /&gt;
                &lt;button type=&quot;button&quot; className=&quot;outline&quot; onClick={handleReset}&gt;
                  Reset
                &lt;/button&gt;
                &lt;button type=&quot;submit&quot; disabled={isSubmitting}&gt;
                  Submit
                &lt;/button&gt;
              &lt;/form&gt;
            );
          }}
        &lt;/Formik&gt;
        &lt;span&gt;Entered e-mail: {email}&lt;/span&gt;
      &lt;/div&gt;
    );
  };
  
  render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  
  
  </code></pre>
  <p>Unfortunately, I couldn't get it to work with Stack Snippets, so I made a codesandbox instead:
  <a href="https://codesandbox.io/s/formik-example-forked-0osy6?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/formik-example-forked-0osy6?file=/index.js</a></p>
  <p>I originally wanted to do it this way because I need this value somewhere completely unrelated to the form. I considered just using a state variable but this felt like unnecessarily duplicating state, but I might be wrong.</p>
  <p>Many thanks!</p>