React hook form issue

Question

I am facing 3 issues when using the react-hook-form. Please help.

Case 1:
I use this hook as pagination.

Action:
Click "Switch to page 2"

Expect the result:
the content of page 2 should be displayed

Facing the Issue:
It still shows page 1 content. But click the "Add data" then, the content of page 2 will be listed.

Tried to fix:
I don't use the "fields" in useFieldArray. So, I create another "watch" to get the expected result.

Question:
I am not sure what the problem is. It seems like an async data update issue.

---

Case 2:. Why the page will be re-render loop when there is lazy load applied?

---

Case 3:

Action:
Just Click "Go to page 2"

Facing the Issue:
There are object "contact" with an empty array

Expect the result:
In console log, form2[0]["data'] or form2[1]["data'] should be empty array even I havn't click the "Add contact" or "Back to page1"

Tried to fix:
I use useEffect to detect the "watch data then,remove it if there is empty array.

Question:
I think useFieldArray is auto-create the empty array for the user to append or insert ready. So, how can it avoid this situation?

https://codesandbox.io/s/exciting-galileo-m4p7q3

---

I hope these 3 cases will help all React Js beginners who are facing the same questions.