Hay una lista de digamos animales. Los tengo todos configurados en MongoDB y los recibo a través de acciones redux con await axios.get("/api/getanimals") y luego los mapeo (eliminé todas las clases del fragmento de código solo para acortar el código)

 {animalsList.map((item, i) => { return ( <div key={i}> <div> <input value={item.name} onChange={(e) => handleAnimals(e, i)} ></input> <input value={item.category} onChange={(e) => handleAnimals(e, i)} /> </div> <div> {animalsList.length !== 1 && ( <button onClick={() => handleRemoveAnimals(i)} > Remove </button> )} {animalsList.length - 1 === i && ( <button onClick={handleAddAnimals} > Add </button> )} </div> </div> ) })}

Los está mapeando perfectamente como quería el formulario de entrada y creando una matriz (puedo verlo con JSON.stringify Array debajo del formulario ), pero ahora llegamos a la parte difícil. ¿Cómo creo un controlador de formulario y una solicitud de publicación de API para actualizar todas las entradas editadas a la vez como objetos separados en la base de datos como los recibo con await Animals.find({}) ? También necesito poder agregar o eliminar nuevos animales, para eso son esos botones dinámicos con onClick.