React bootstrap React Table dropdown cell component

export function DropDownCell(props) {

  const [dropDownVal, setDropDownValue] = useState(props?.cellInfo?.cell?.value);




  useEffect(() => {

    if (props?.cellInfo?.cell?.value && (dropDownVal !== props?.cellInfo?.cell?.value)) {

      setDropDownValue(props?.cellInfo?.cell?.value);

    }

  }, [props?.cellInfo?.cell?.value]);




  const handleChange = (e) => {

    setDropDownValue(e.target.value);

    props.updateHandler(props?.cellInfo?.row?.index, props?.cellInfo?.column?.id, e.target.value);

  };




  return <div>

    <Form.Group  className={'m-0'}>

      <Form.Control as={'select'}

                    id={props?.cellInfo?.row?.index + '_' + props?.cellInfo?.column?.id}

                    value={dropDownVal ? dropDownVal : ''}

                    required={props?.required}

                    onChange={handleChange}>

        <option value="" key={props?.controlName + '_NONE'}>Select option</option>

        {props?.list?.map((listItem) => {

          return <option key={props?.controlName + '_' + listItem?.value} value={listItem?.value}>{listItem?.label}</option>

        })}

      </Form.Control>

    </Form.Group>

  </div>;

};

How to use in column :

{
  Header: "Material", accessor: "itemId", Cell: (cellInfo) => {
    return <DropDownCell cellInfo={cellInfo} 

                         updateHandler={() => {}}
                         controlName="itemId"                         

                         required={true}
                         list={[]}/>  }
}