Dynamic field base on other field

[aliakbarazizi]

I try toggle form base on other fields (checkbox or radio)

But the form act very weird and I don't understand what I'm missing here

For example look at this example

https://codesandbox.io/s/react-hook-form-watch-v7-ts-forked-lwnpz7?file=%2Fsrc%2Findex.tsx

If you fill field1 value, then toggle checkbox, the value for field2 is same as field1, but it should be new field without any value.

I think i missing something important here but I can't find anything in document, can anyone tell me whats going on?

[aliakbarazizi]

Rec.0016.mp4

[aliakbarazizi]

I found out i can fix this by adding key to component. I think the issue is react won't create new element on toggle and just update the old input props.

here is example that working
https://codesandbox.io/s/react-hook-form-watch-v7-ts-forked-wcch6p?file=%2Fsrc%2Findex.tsx

but still is this the good way to do this? or there is a better way?
My real form has a lot of fields and calling unregister for all of them is too much