Material-ui 自动完成不会根据值属性更改其值

Question

I had to generate multiple rows, where each row has a dropdown (Autocomplete) that was searchable through API, and other fields too. All is working perfectly, except when I delete a row from the middle somewhere, just the autocomplete component displays the same value as earlier, however, I get correct data in my state.

So if I had an array with the following items.

And now if I delete Row 2 which is Brite – (500 g), I get this display on the screen.

However, all other items of the rows are correctly displayed, so I'm assuming there is nothing wrong with my logic of handling the array, but due to autocomplete showing wrong value(however it holds the correct object passed into its value prop), it seems that all items have suddenly changed their Qty and prices, and the last item was deleted (instead of 2nd one). If I sum up the problem, although the component was re-rendered based on new array in the state, that was obtained after deleting a row, autocomplete still displays its previous value which is nowhere is the data now.

<Autocomplete
                            options={skuItems}
                            getOptionLabel={option => option.name}
                            renderInput={params => (
                                <TextField {...params} label="SKU" variant="outlined" />
                            )}
                            value={selectedSkuItems[index]}
                            onChange={(e, val) => orderItemHandleChange(e, val, index)}
                            onInputChange={skuSearch}
/> (edited) 

Answer 1

The issue resides where you have the map function. The key must be something unique. If it involves the index, is bad. Because you remove items by index and then another item takes that indexes place, and a proper rewrite of the DOM is failing. As seen bellow:

collection.map((value, index) => { <div key={something unique}> </div>}