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.

```
 const [dataSet, setDataSet] = useState([
{
  City: "Amsterdam",
  Provence: "North-Holland"
},
{
  City: "Rotterdam",
  Provence: "South-Holland"
}
]);

  const newCity = () => {
    const city = [
      {
        City: "Groningen",
        Provence: "Groningen"
      }
    ];

    setDataSet(city);
  };
<button onClick={newCity}>Add city</button>

<table>
 <tr>
  <th>City</th>
  <th>Provence</th>
 </tr>
 {dataSet.map(city => (
  <tr>
   <td>
     <input defaultValue={city.City}/>
   </td>
   <td>
    <input defaultValue={city.Provence}/>
   </td>
 </tr>
 )}
</table>

```

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.

Here is a codebox link to see the behavior in action:
<https://codesandbox.io/s/dry-water-rss2m8?file=/src/App.js>

Why does it behave like this?