Material UI 中的自动完成错误

Question

I am creating a single page application with React and i have a shipment page where more than one product and product quantity will be add. I create some function for my case. My functions are working(sending correct value to backend ) but after i click add button the autocomplate displayed values are getting diffrent. How can i fix it?

Like example: after:

Note: : The values written on the inputs in the picture are the selected values but different from the values in the autocomplate as seen

My code:

 const [productList, setProductList] = useState([{ name: "", quantity:  1}]); 
    const [product, setProduct] = useState([""]);

  const handleQuantityChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...productList];
        list[index][name] = value;
        setProductList(list);
      };
 const handleLabelChange = (name, index, value) => {
        const list = [...productList];
        list[index][name] = value;
        setProductList(list);
      };
    
     const handleServiceAdd = () => {
        setProductList([...productList, { name: "", quantity: 0 }]);
      };
         
    return(
    <div>
  {productList.map((p, index) => (
      <Autocomplete
       isOptionEqualToValue={(option, value) => option.name === value.name}
       value={p.name}
       key={index}
       disablePortal
       onChange={(e, newValue) => {
       handleLabelChange("name", index, newValue);
                        }}
       id="controllable-states-demo"
       options={product.map((option) => option.name?option.name:"loading...")}
       renderInput={(params) => (

        <TextField
          {...register('productNameV')}
             error={errors.productNameV ? true : false}
           helperText={errors.productNameV?.message}
           {...params}
                          label={ "Product"+ (index + 1) }
                          InputProps={{
                            ...params.InputProps,
                            endAdornment: (
                              <React.Fragment>
                                {loading ? <CircularProgress color="inherit" size={20} /> : null}
                                {params.InputProps.endAdornment}
                              </React.Fragment>
                            ),
                          }}
                        />                        
                        )}                  
                      />
    </div>           
    ))}
    <div>)

Answer 1

While using yup and react hooks form, I had a validation like a single object:

  const validationSchema = Yup.object().shape({
        product: Yup.string().required("product required"),
      });

But i was working on array so validate must have array too so i added this:

  const validationSchema = Yup.object().shape({
products: Yup.array()
      .of(
        Yup.object({
          name: Yup.string().required("product required"),
          quantity: Yup.number().required("quantity required"),
        })
      )
      .required("")          
});

last change, TextField should be like this:

 <TextField
  {...register(`products.${index}.name`)}
       error={errors.products?.[index]?.name ? true : false}
       helperText={errors.products?.[index]?.name?.message}
       {...params}
       label={ "Product"+ (index + 1) }
       InputProps={{
       ...params.InputProps,
       endAdornment: (
        <React.Fragment>
        {loading ? <CircularProgress color="inherit" size={20} /> : null}
        {params.InputProps.endAdornment}
          </React.Fragment>
       ),
  }}
  />                        

)}
/>