I am working on a CMS that supports the export functionality. For most of the fields we can’t store only the value, we have to store an id with it, therefore the structure has to be like this

I have a basic form where the code for it is using react-hook-form and looks like:

so I’m using react here, I have a form inside of another form, to be more clear, when a user clicks on a specific button, a dialog shows up which has the form that I want to be submitted. my 2 forms have different IDs, but when I submit the form I want ( which is in the dialog ) , the form in the background also submits. I’m using react-hook-form to manage my forms here if this is also related.
hope this image can give you all a little background on the situation.

I am trying to create a simple form in React using react-hook-form library.
I have added different validations and other things to the form.
But I am getting below console error.

I’m checking React Hook Form’s isDirty when clicking outside of a modal:

I’m am working on implementation of a multi step form with react-hook-form but I can’t do that input fields do get initialized with the form data when I return to the previous page.

My problem :