when removing element from form array with react-final-form, the displayed value of the <input> does not update, but final-form data object does

Question

This is a bizarre situation. I have simplified an example of react-final-form-array that allows me to add elements to my form, and i can extend an array of objects. It is very similar to the simple example provided by react-final-form-arrays. The array works just fine, but the issue im having is that when i try to REMOVE a specific element, the actual value displayed in the inputs doesnt change. So for example, with images:

Here we can see i can add customers to a list, which makes an array of objects. This works great. Now, let's say i want to get rid of the first element. i click the X, and what happens?

Here we can see that the form data properly removed the first element i wanted to remove, however, the actual value DISPLAYED on the inputs is still John Doe, though the form knows it's Mary Jane. When i click on the inputs, they seem to update to the correct values. But this is not what should be happening.

The STRANGEST thing though, is that i made a codesandbox you can see here https://codesandbox.io/s/agitated-wilson-5xlqq

It has the exact same code I have on my app, and it works as expected! So i cant even recreate the bug and i made sure the dependencies are the same versions im working with. I can only recreate it in my own setup, and i dont understand why that is.

I tried with chrome, safari and firefox and they all seem to be doing the same thing on my computer and i even tried on my phone by connecting to my react server that runs on my laptop, and they all show the same behavior.

I dont know what i could be, versions, react, if anyone has any idea or has had a similar issue in the past, PLEASE HELP. I won't paste my code here so as not to bloat this post, but you can see it's literally the exact same code in the sandbox i linked above.

EDIT: I want to point out another bug that occurs, and thats once i remove the first element, if i try to edit it, it pushes another field into the array with the input i just added, as if it were bound or something. I wish i could recreate it on codesandbox

Answer 1

Try deleting your node_modules folder and reinstalling them. Are you seeing any errors in your console log?