issue: useWatch returning array with undefined

[phantomcosmonaut]

Version Number

7.51.5 (latest)

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/unruffled-mcclintock-44t7mp

Steps to reproduce

1. Click Add Foobar button
2. Click Remove Foobar
3. Result: Exception is thrown: Cannot read properties of undefined (reading 'color')

Expected behaviour

Actual: useWatch returns [undefined]
Expected: useWatch returns []

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[AmineBosnali]

Hi @phantomcosmonaut , the previous code used {getValues(foobars.${i}).color} to access the color value of each foobar item, which resulted in errors. The correct approach is to use {getValues(foobars.${i}.color)}.
This ensures that the color value is accessed correctly from the foobars array.
{getValues('foobars.${i}.color')}

[phantomcosmonaut]

@AmineBosnali thank you for your reply, however I was using that syntax to demonstrate the problem I mentioned in the ticket which is that the useWatch result contains an array with undefined. This is not the behavior I would expect. On second render, the undefined value is removed.