How to change the drop down options of the colors in the NestedArray Component based on the value of the selected product in the FieldArray Component?

I kind of wanted to display the colors according to what was chosen as the product in AutoComplete of the FieldArray component. For example, I chose Tumbler, this will show the list of colors the tumbler has which are Black, Pink, and Green . And if I’ll choose the product Shirt, the list of colors that will display are Blue and Black

How can I do this? Thank you.

This is the JSON.stringify(products)

[
  {
    prodName: "Tumbler",
    size: "500",
    colorMap: { Black: 20, Pink: 10, Green: 5 },
    id: "aRLMZkiSU7T0lcsPCSsV"
  },
  {
    prodName: "Shirt",
    size: "L",
    colorMap: { Blue: 10, Black: 10 },
    id: "uTHIR6OQFRuqP9Drft0e"
  },
  {
    size: "200",
    colorMap: { Green: 50, Red: 19, Black: 20 },
    prodName: "Notebook",
    id: "y9ECyZBKp2OBekmWym4M"
  }
];

I have recreated the problem in codesandbox: React Hook Form - Wizard Form - From Reddit with data - CodeSandbox

`const FieldArray = ({  products }) => {

  const options = products.map(
    (object) =>
      object.prodName +
      " - " +
      object.size +
     
  );

  console.log(fields, "f");

  const selectedProduct = fields.map((object) => object.product);
  console.log(selectedProduct, "selectedProduct");

  return (
    <div>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id} style={{ listStyleType: "none" }}>
              <Controller
                control={control}
                name={`order.${index}.product`}
                render={({ field: { onChange, value = "", ...rest } }) => (
                  <Autocomplete
                    {...rest}
                    onInputChange={(e, newValue) => {
                      onChange(newValue);
                    }}
                    inputValue={value}
                    options={options}
                    isOptionEqualToValue={(option, value) =>
                      option?.value === value?.value
                    }
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label="Product"
                        variant="outlined"
                        fullWidth
                      />
                    )}
                  />
                )}
              />
              <NestedArray
                nestIndex={index}
                {...{ control, register, products }}
              />   //pass the corresponding colors here of the selected product (AutoComplete) in the above component
            </li>
          );
        })}
      </ul>
      <section>
       //button to add more product
      </section>
    </div>
  );
};

export default FieldArray;

I have also posted this on: javascript - How can I show the corresponding colors of the product that was selected in AutoComplete and pass it to another component? - Stack Overflow