Bug - setValue with field array not working when same id is used

Describe the bug If we use setValue to change a field array and use the same id for an element, then the element will briefly change but then revert back to the original value.

To Reproduce Steps to reproduce the behavior:

1. Go to the sandbox
2. Click on change value
3. Notice in the console that the new value for name is printed but then the original value is printed and UI does reflects the original as it’s the final state.

Codesandbox link (Required) https://codesandbox.io/s/funny-mendel-xgo9y?file=/src/App.js

Expected behavior When using setValue with the same id for elements, I would expect formValues to still be updated. Using the same id becomes important not only for performance but also for preserving the state of field array elements. Imagine that we have something like:

{fields.map((item, index) => (
  <ComplexInput
     key={item.id}
     item={item}
   />

<ComplexInput/> might have multiple inputs and its own internal state (like data fetched from a server) that we want to preserve upon changing values with setValue. The only way to do this is to use the same id for key.

Screenshots

[leapful]

@wdfinch

If your child component of field array always has the index, you can set the value directly by using its index, for example:

setValue(`names.${index}.name`, 'mike');

Working sample: https://codesandbox.io/s/strange-wright-8evmy?file=/src/App.js

[wdfinch]

I’m noticing a potential bug but will make a new issue.