React data grid - error in renderEditCell - Trying to add a dropdown in the grid column on edit mode

I am new in react. I have a grid showing some data. But on editing, the column needs to be change to dropdown and should be able to select new option. On clicking outside it should back to normal column. I am trying to implement this using renderEditCell property. But I am getting the following error. Please help me to fix this error.

enter image description here

Following are the code blocks

<DataGrid
autoHeight
getRowId={(x) => x.slsRid as number}
rows={(sales as GridRowModel[]) || []}
columns={gridColumns}
hideFooterPagination={true}
   hideFooter={true}
 />

const gridColumns: GridColDef[] = [
  {
     field: 'name',
     headerName: 'Name',
     flex: 5,
  },
  {
     field: 'type',
     headerName: 'Type',
     flex: 5,
     renderCell: (params) => params.row.type,
     renderEditCell: (params) => (
        <DropDownTwo
           id={params.row.slsRid}
           value={{
              selectedValue: 'test',
              options: types,
              dropDownName: 'type',
              dropDownId: 'test',
              handleDropDownChange: updateObject,
              row: params.row,
           }}
           field={'type'}
        />
        ),
      }
];

const DropDownTwo = (props: GridRenderCellParams<DropDownProps>) => {
  const { id, value, field } = props;
  const apiRef = useGridApiContext();
  const [selected, setSelected] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     window.alert(e.target.value);
     apiRef.current.setEditCellValue({ id, field, value: e.target.value });
  };

  return (
     <select
        data-selected={selected}
        data-id={dropDownId}
        data-name={dropDownName}
        value={selected}
        onChange={handleChange}
        style={{ height: '35px', width: '175px' }}
     >
        {value.options.map((val) => (
           <option key={val} value={val} onClick={() => setSelected(val)}>
              {val}
           </option>
        ))}
     </select>
  );

}