How can I loop this function where I decrement the values of a field from firestore?

I wanted to decrement the values of the color upon submitting the form. Now, there are instances where there could be multiple products in one submission. I have these form where the user can choose a product, enter the quantity, and the desired color, and could add another product, and so on.

This is what the data looks like if I will submit it:

And these are the firestore documents for the Shirt and Notebook

How can I loop the function so I can decrement those chosen colors of the specific product above? What I did there was just hard coded the document ID of the specific product and then decrement it. Is there a way not to hard code it?

I’ve assumed that the qty is equal to 10 just to see if it really does decrement. And it does. Also, I’m not using any admin SDK.

      const qty = 10;

  async function updateData(color) {
    const docRef = doc(db, "products", "m08YmrlFxhxLxyc3hVjT");
    await updateDoc(docRef, {
      [`colorMap.Black`]: increment(-1 * qty),
      [`colorMap.Gold`]: increment(-1 * qty),
    });

    const docRef2 = doc(db, "products", "nN2w57SiDovbtQ6EBzGb");
    await updateDoc(docRef2, {
      [`colorMap.green`]: increment(-1 * qty),
      [`colorMap.red`]: increment(-1 * qty),
    });
  }

index.js where I submit the data:

import React from "react";
import { useForm } from "react-hook-form";
import FieldArray from "./fieldArray";
import ReactDOM from "react-dom";

import "./styles.css";
import { Button } from "@mui/material";

const defaultValues = {
  test: [
    {
      product: "",
      nestedArray: [{ size: "", color: "", design: "" }]
    }
  ]
};

function App() {
  const {
    control,
    register,
    handleSubmit,
    getValues,
    errors,
    reset,
    setValue
  } = useForm({
    defaultValues
  });
  const onSubmit = (data) => {
    console.log(data);
    try {
      //codes here to submit the data in the another collection
      //then a function to decrement the values.
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Array of Array Fields</h1>
      <p>
        The following example demonstrate the ability of building nested array
        fields.
      </p>

      <FieldArray
        {...{ control, register, defaultValues, getValues, setValue, errors }}
      />

      <button type="button" onClick={() => reset(defaultValues)}>
        Reset
      </button>

      <Button type="submit">Submit</Button>
      {/* <input type="submit" /> */}
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is the rest of the forms:
https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-2-efwq6?fbclid=IwAR25MosMKxOk-Lyz23Lp7kbkuZSWaSXPSYSehOG-0L0PRhRGtQeZdzXzILk&file=/src/index.js