useVieldArray for nested autocomplete field reset's value on every append and remove

[AishuSinghG]

Hi,
Im trying to create a form using react-hook-form which has Autocomplete fields and have nested objects. Here is the object
defaultvalues : {
data:[{
name: string,
testId: string
country:[{
id: string,
value: string
}]
}]
}

For the for Im using 2 useFieldarray
one for data and another for country. So for each data multiple countries can be added. When trying to append country for a data, the all previous values of counter Id is removed (country Id is a Autocomplete field of value type Object)

would need your help on this

[Moshyfawn]

Hi, we'll need a reproduction codesandbox in order for us to help you

[AishuSinghG]

Hi,
Thank you for the response.

Here is the link
NestedFieldArray

however this is in JavaScript,, in my project I'm using typescript