Tengo un formulario integrado con React con forma de gancho de reacción que permite a los usuarios agregar pasos dinámicos usando el método useFieldArray que viene con forma de gancho de reacción.

Mi problema es que, ¿cómo puedo comparar los datos originales que se pasaron al formulario con los nuevos datos editados para poder realizar los cambios correspondientes en mi backend? Aquí hay un ejemplo de los datos originales:

 { "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}] }

Entonces el usuario hace los siguientes cambios:

 { "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}] }

Por lo que se ha hecho lo siguiente:

1. UPDATE - El name ha sido cambiado.

La matriz de métodos:

1. UPDATE : el método de id 1 se ha cambiado de "método 1" a "ejemplo de método 1"
2. DELETE - El método con id 2 ha sido eliminado
3. INSERT : ahora se ha agregado el método 3.

La matriz de ingredientes:

1. DELETE - El primer ingrediente con id 1 ha sido eliminado
2. UPDATE : el ingrediente con id 2 ha actualizado el ingrediente de "ingrediente 2" a "cambio de ingrediente 2"

¿Deberían los cambios estar en un nuevo objeto para mostrar cambios o insertar, actualizar y eliminar matrices/objetos individuales?

Gracias.