Trying to only update the specific array in Firestore but what it does is add more data in the array

Question

I have this data structure in Firestore:

Expected output: I will only update the array[1] which is M.

What it currently does: Instead of only updating the array[1] it added another data in the array. So instead of having only indexes 0,1,2 it became 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")
 };

Forms:

{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>
          ))}

Answer 1

There is no way to update an item in an array field with either arrayUnion or otherwise. You'll have to:

1. Read the document into your application
2. Get the full array
3. Update the one item in the array
4. Write the full array back to the document

Also see:

• Firestore Update single item in an array field
• Cloud firestore: Update field values in nested array object with dot notation
• How can I update an object inside of an array in firestore?