title: TypeError: Invalid attempt to spread non-iterable instance and Synthetic Events
body: <p>I am trying to build a csv file uploader using react. I am getting the &quot;Invalid attempt to spread non-iterable instances&quot; error when the file is selected and I try to set the state with it. This is my code that gives that error:</p>
  <pre><code>const IFImport = (props) =&gt; {
      const [file, setFile] = useState(null);
      const [loading, setLoading] = useState(false);
  
  
  
    const onUpload = async (e) =&gt; {
       const csvFile = e;
       console.log(csvFile)
       setFile(...file, csvFile)
    }
  
    return (
      &lt;&gt;
        &lt;ContentRow&gt;
          &lt;h1&gt;
            &lt;Link to={&quot;/&quot;}&gt;
              &lt;Button color=&quot;link&quot;&gt;&amp;lt;&lt;/Button&gt;
            &lt;/Link&gt;
            Upload Enrollment Information
            &lt;ErrorList error={props.error} /&gt;
          &lt;/h1&gt;
        &lt;/ContentRow&gt;
        &lt;ContentRow&gt;
        &lt;Label&gt;Upload a CSV File for Enrollment&lt;/Label&gt;
            &lt;FormGroup&gt;
              &lt;div&gt;
      {file !== null ? &lt;p&gt;{file.name}&lt;/p&gt; : &quot;&quot;}
              &lt;/div&gt;
              &lt;div&gt;
                &lt;Input
                  type=&quot;file&quot;
                  name=&quot;data.file&quot;
                  multiple={false}
                  onChange={e =&gt; onUpload(e)}
                  accept=&quot;/csv&quot;
                /&gt;{&quot; &quot;}
              &lt;/div&gt;
            &lt;/FormGroup&gt;
        &lt;/ContentRow&gt;
      &lt;/&gt;
    );
  };
  
  export default IFImport;
  </code></pre>
  <p>I assumed this was an issue with setting the state here in this onUpload function so I tried no setting the state here but then I just get a synthetic even error. Can anyone tell me the best way to handle this sort of upload?</p>