How can I update the values of Object.entries?

Question

export const data = [
  {
    size: "S",
    colorMap: { Yellow: 10, Green: 5, Black: 50 },
    productName: "Shirt",
    price: 200
  }
];

I wanted to show the initial values of the colorMapand then update its quantity. How can I update the quantities of the colors which are the values of the Object.entries(colorMap)?

Codesandbox: https://codesandbox.io/s/form-changehanlder-2-2repsp?file=/part2.js

The product here came from the parent component:

This is the child component

import React, { useState } from "react";
import { Grid, TextField } from "@mui/material";

const Part2 = ({ product }) => {
  const [qty, setQty] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(qty);
  };

  return (
    <div>
      {product &&
        product.map((prod, index) => (
          <>
            <Grid item key={index}>
              <form onSubmit={handleSubmit}>
                {Object.entries(prod.colorMap).map((color, index) => (
                  <Grid
                    container
                    rowSpacing={1}
                    columnSpacing={{ xs: 1, sm: 2, md: 3 }}
                    key={color[0]}
                  >
                    <Grid item xs={6}>
                      <TextField
                        type="text"
                        variant="outlined"
                        label="Color"
                        fullWidth
                        value={color[0]}
                        disabled
                      />
                    </Grid>

                    <Grid item xs={6}>
                      <TextField
                        type="number"
                        variant="outlined"
                        fullWidth
                        label="Quantity"
                        value={color[1]}
                        onChange={(e) => console.log(index)}
                      />
                    </Grid>
                  </Grid>
                ))}
              </form>
            </Grid>
          </>
        ))}
    </div>
  );
};

export default Part2;