title: html table is duplicating defaultValue's for no apparent reason
body: <p>I have some data that is displayed in a table. When I add a table data cell (td) with JS the defaultValue and innerText of the previous table data cell (td) is being copied in the new table data (td). I don't understand why this happens? I just add a new html element which, in essence, has nothing to do with the already existing element I would say.</p>
  <pre><code> const [dataSet, setDataSet] = useState([
  {
    City: &quot;Amsterdam&quot;,
    Provence: &quot;North-Holland&quot;
  },
  {
    City: &quot;Rotterdam&quot;,
    Provence: &quot;South-Holland&quot;
  }
  ]);
      
    const newCity = () =&gt; {
      const city = [
        {
          City: &quot;Groningen&quot;,
          Provence: &quot;Groningen&quot;
        }
      ];
  
      setDataSet(city);
    };
  &lt;button onClick={newCity}&gt;Add city&lt;/button&gt;
  
  &lt;table&gt;
   &lt;tr&gt;
    &lt;th&gt;City&lt;/th&gt;
    &lt;th&gt;Provence&lt;/th&gt;
   &lt;/tr&gt;
   {dataSet.map(city =&gt; (
    &lt;tr&gt;
     &lt;td&gt;
       &lt;input defaultValue={city.City}/&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;input defaultValue={city.Provence}/&gt;
     &lt;/td&gt;
   &lt;/tr&gt;
   )}
  &lt;/table&gt;
  </code></pre>
  <p>So when I click on the 'newCity button' a new table row (tr) is added, but instead of populating the table data cells (td) with the correct data (City: 'Groningen', Provence: 'Groningen') it populates the td with the data from the previous table row (tr) (City: 'Amsterdam', Provence: 'North-Holland'). This seems really odd to me, since I only add a new html element that has no relation to the table row (tr) before it exempt for it being in the same table.</p>
  <p>Here is a codebox link to see the behavior in action:
  <a href="https://codesandbox.io/s/dry-water-rss2m8?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/dry-water-rss2m8?file=/src/App.js</a></p>
  <p>Why does it behave like this?</p>