I have Dynamically generate select dropdown & I’m seting the value of drop down from key of a object when I select value from a drop down I update my object and object succesfully updated but my drop down doest not show the updated value in UI.

  const [mappingArr,setMappingArr] = useState({});

  const mapping = async (tableFields, excel) => {
    const newRows = excel.map((colName, index) => {
      mappingArr[colName] = 'name'
      setMappingArr(mappingArr)
      return {
        "column name": colName,
        "Map to field": (
          <select
            value={mappingArr[colName]}
            key = {tableFields[index]}
            onChange={(event) => { handleSelectColumn(event, colName, index)}}
          >
            <option value=''>--Select--</option>
            {tableFields.map((col,i) => (
              <option key={col} value={col}>
                {col}
              </option>
            ))}
          </select>
        ),
      }
    });
    setRow(newRows);
  };

  const handleSelectColumn = async (event, colName, index) => {
    mappingArr[colName] = event.target.value
   setMappingArr(mappingArr)
   };

I tried not setting the value at all so that drop down behaves like a native element but in that case when I scroll down the page component re-renders my html element(drop down) & forgets its selected value, hence setting the value is required here.