title: Formik - handle file hack - why component re-renders when file is selected?
body: <p>I am well aware that formik does not support file upload. I have read that there are hacks out there. I have tried the one below with <code>onChange</code>, <code>setFieldValue</code> and <code>event.current.target</code>. The problem is that when file is selected, the component renders and the full page goes blank. What am I doing wrong? Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Formik, Form, Field } from 'formik';
  
  const initialValues = {
    file: ''
  };
  
  const TestArt = () =&gt; {
    const onSubmitFile = values =&gt; {
      debugger;
    };
    return (
      &lt;div&gt;
        &lt;Formik
          initialValues={initialValues}
          onSubmit={onSubmitFile}
          component={UploadFile}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  function UploadFile({ setFieldValue }) {
    debugger;
    return (
      &lt;div&gt;
        &lt;Form&gt;
          &lt;Field
            id="file"
            type="file"
            name="file"
            onChange={event =&gt; {
              setFieldValue('file', event.currentTarget.files[0]);
            }}
          /&gt;
          &lt;button&gt;submit&lt;/button&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
    );
  }
  
  export default TestArt;</code></pre>
  </div>
  </div>
  </p>