Child component state is reset to initial state if any state of parent component is changed

[MehbubRashid]

https://codesandbox.io/s/jolly-ully-bhehvu?file=/src/App.js

1. Type something in the "new attribute name" input field and click on the add button. This will add a new sortable item. add as much item as you want.
2. Each sortable item will contain an input field with an initial value. Change the initial value to something else.
3. Again type something in the "new attribute name" field. This will cause the previously changed input value gone and reset to the initial value.

Theory: "new attribute name" input field is in the parent component and the sortable items are the child components. when we type something in the "new attribute name" field, the state of this parent component changes and it makes the states of child components reset. Why is that? what's the solution of this? Thanks