title: React DOM not updating on state change
body: <p>I have a react component that will accept an arbitrary number of files, each with its own language. I want to be able to have a button that lets a user add as many files as they want, each with its own dropdown menu of languages. I've eliminated the file upload for now as I isolate the issue I'm having.</p>
  
  <p>I've created quite a few similar components already without a problem, but for some reason I'm having major trouble with this one. When I change the language on the dropdown, I console log state and see that the language has updated in state, but it does not update on the DOM in my map method.</p>
  
  <p>Here is my code</p>
  
  <pre><code>function App() {
    const [files, setFiles] = useState([]);
  
    const languages = ["English", "Spanish", "Arabic", "French"];
  
    const handleAddFile = e =&gt; {
      let newFiles = files;
      newFiles.push({
        content: null,
        preview: null,
        language: ""
      });
      setFiles(newFiles);
    };
  
    const changeLanguage = (event, index) =&gt; {
      let newFiles = files;
      newFiles[index].language = event.target.value;
      setFiles(newFiles);
    };
  
    console.log(files);
  
    return (
      &lt;div&gt;
        &lt;p&gt;Files&lt;/p&gt;
        &lt;p&gt;Upload a file for as many languages as you have&lt;/p&gt;
        {files.map((file, index) =&gt; (
          &lt;div key={index}&gt;
            &lt;p&gt;current language: {file.language}&lt;/p&gt;
            &lt;select
              value={file.language}
              onChange={event =&gt; changeLanguage(event, index)}
            &gt;
              &lt;option value="" disabled&gt;
                Select a language
              &lt;/option&gt;
              {languages.map((lang, i) =&gt; (
                &lt;option value={lang} key={i}&gt;
                  {lang}
                &lt;/option&gt;
              ))}
            &lt;/select&gt;
          &lt;/div&gt;
        ))}
        &lt;button onClick={e =&gt; handleAddFile(e)}&gt;+ Add File&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I've also made a codesandbox to reproduce the issue, but it actually further complicated things. When I run the code locally, I am able to add file instances just fine, but the language on the select element does not update on the DOM for any instance. In the codesandbox, nothing updates on the DOM unless I make an edit in the editor, then everything updates just as I'd expect, including the language. In all cases state is console logged exactly as I'd expect it to be. The component in the sandbox is identical to what I have locally, though locally it is embedded in another component.</p>
  
  <p><a href="https://codesandbox.io/s/ed4fx?file=/src/App.js:0-1248" rel="nofollow noreferrer">https://codesandbox.io/s/ed4fx?file=/src/App.js:0-1248</a></p>