Tengo esta estructura de datos en Firestore:

Resultado esperado: solo actualizaré la array[1] que es M .

Lo que hace actualmente: en lugar de solo actualizar la array[1] , agregó otros datos en la array . Entonces, en lugar de tener solo índices 0,1,2 , se convirtió en 0,1,2,3

 const [category, setCategory] = useState([]); //useEffect to get all of the categories const [options, setOptions] = useState([]); const [edit, setEdit] = useState(); const handleSubmit = async (e) => { e.preventDefault(); const ref = doc(db, "category", state); await updateDoc(ref, { category: edit, options: arrayUnion(options), }); console.log("updated") };

Formularios:

 {category && category.map((category, index) => ( <form onSubmit={handleSubmit}> <TextField defaultValue={category.cat} type="text" value={categoryEdit} fullWidth onChange={(e) => setCategoryEdit(e.target.value)} /> {category.options.map((i) => ( <TextField type="text" defaultValue={i} variant="outlined" fullWidth value={options[i]} onChange={(e) => setOptions(e.target.value)} /> ))} </> )} <Button type="submit">Submit</Button> </form> ))}