I have a form that is built in with React with react-hook-form that allows users to add dynamic steps using the useFieldArray method which comes with react-hook-form.

My problem is that how can I compare the original data that was passed into the form with the new edited data so I can make the corresponding changes to my backend? Here is an example of the original data:

{
  "id": "1",
  "name": "Recipe Name",
  "method": [ {id:1, method: "method 1", recipesId:  1} , {id:2, method: "method 2", recipesId:  1}],
  "ingredients": [{id:1, ingredient: "ingredient 1", recipesId:  1} , {id:2, ingredient: "ingredient 2", recipesId:  1}]
}

Then the user makes the following changes:

{
  "id": "1",
  "name": "Recipe Name Example",
  "method": [ {id:1, method: "method 1 example", recipesId:  1} , {id:3, method: "method 3", recipesId:  1}],
  "ingredients": [{id:2, ingredient: "ingredient 2 change", recipesId:  1}]
}

So the following has been done:

1. UPDATE - The name has been changed.

The method array:

1. UPDATE - The method of id 1 has been changed from "method 1" to "method 1 example"
2. DELETE - The method with id 2 has been deleted
3. INSERT - Method 3 has now been added.

The ingredients array:

1. DELETE - The first ingredient with id 1 has been deleted
2. UPDATE - The ingredient with id 2 has updated the ingredient from "ingredient 2" to "ingredient 2 change"

Should the changes be in a new object to show changes or individual Insert, Update and Delete arrays/objects?

Thankyou.