What happened?

When deleting a metadata key-value pair in the Commit/Merge/Import modals, the UI appears to delete the last field in the list, even though the correct field is removed from the state.

Steps to Reproduce:

1. Open a Commit, Merge, or Import modal
2. Click "Add metadata field" multiple times to create 3 or more fields
3. Fill different values in each key (e.g. key1/value1, key2/value2, key3/value3)
4. Click the X button on any field except the last one.

Expected behavior

The field that was deleted should be removed from the UI.

Actual behaviour:
The last field in the list appears to be deleted visually, but the state is correctly updated. The UI is showing stale data. If you close the modal and reopen the modal, the view is refreshed and you can see the correct data in the fields.

The issue appears to be caused by the MetadataFields component using the array index as the key. When a field is deleted, all fields after it shift down by one index. React sees the same key values and reuses the existing DOM elements.

Example:
Before: [key1/1, key2/2, key3/3] Keys: [0, 1, 2]
Delete index 1 (key2/2)
After: [key1/1, key3/3] Keys: [0, 1]

React keeps the DOM element at key "1" (which was showing "key2/2")
and just removes the element at key "2" (which was showing "key3/3")

How lakeFS is installed

lakeFS cloud