The list renders fine. The reverse button reorders the array. But edits to the input fields don't follow their item — they stay glued to the position they were typed in.
Symptoms
- Edit the Apple input to "Apple Pie"
- Click Reverse
- The text "Apple Pie" now appears on Cherry (the new top row), not on the Apple input
Your Task
Make each input stay with its item after a reorder.
Think about it: React decides whether to reuse or recreate a child by its key. What happens when the key is the array index? When items move, the indices don't — so position 0 keeps the same DOM node even though it now holds a different item.