Error: Adding data in a map in Firestore but the the new data saves as an array inside the map instead of a field

I have this colorMap from firestore which is a map.

What I’m trying to do is add more data in the colorMap. Let’s say I have these:

Green: 50

Black 50

Red 20

And I wanted to add Pink : 80. But what my code currently does is, if I’ll add Pink: 80, the Pink becomes an array instead of a field. This is what happens when I save it in Firestore.

Expected output
Once I’ll add Black : 80, it should be the same data types with the other colors as well.

Submitting in firestore:

  //converting colorList to colorMap (map)
  const colorMap = colorList.reduce(function (map, obj) {
    map[obj.color] = obj.colorStocks;
    return map;
  }, {});

  const colorSave = Object.keys(colorMap);
  const qty = Object.values(colorMap);

  const handleSubmit = (index) => async (e) => {
    e.preventDefault();

    const ref = doc(db, "products", state);
    await updateDoc(ref, {
      ...product[index],
      [`colorMap.${colorSave}`]: qty,
    });
    console.log("done");
  };

This is the console for the colorMap:

Form

 {colorList.map((singleColor, index) => (
                    <div key={index}>
                        <>
                            <>
                                <TextField
                                  label="Color"
                                  name="color"
                                  type="text"
                                  id="color"
                                  required
                                  value={singleColor.color}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                                <TextField
                                  label="Stocks"
                                  name="colorStocks"
                                  type="number"
                                  id="colorStocks"
                                  required
                                  value={singleColor.colorStocks}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                            </>
                        </>
                      </div>
                      <br />
                        //button to remove the row of the textfield
                    </div>
                  ))}
                    //button to add the row of the textfield