Reack hook form + nested useFieldArray ON mui datagrid + getDetailPanel -> Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]'

[tmnrp]

https://codesandbox.io/p/sandbox/whmmy4
steps to reproduce in the above code sandbox

1. click on plus icon of grid row (expand grid row)
2. click on the insert button "insert country + 1"
3. check the error in te console

I have a form which contains Array and each continents have Array

i have rendered the react hook form with a table displaying the continetns and added a button to insert countries.

But when clicked on button to insert, an error is thrown which i am not able to find a fix. I have gone though all the contents on google but did not find any solution

i have created a reproducible code sandbox.

Thanks in advance

Expecting to be able to add countries via useFieldArray but it throws error Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]'