title: React data grid - error in renderEditCell - Trying to add a dropdown in the grid column on edit mode
body: <p>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 <strong>renderEditCell</strong> property. But I am getting the following error. Please help me to fix this error.</p>
  <p><a href="https://i.stack.imgur.com/5Wn90.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Following are the code blocks</p>
  <pre><code>&lt;DataGrid
  autoHeight
  getRowId={(x) =&gt; x.slsRid as number}
  rows={(sales as GridRowModel[]) || []}
  columns={gridColumns}
  hideFooterPagination={true}
     hideFooter={true}
   /&gt;
  </code></pre>
  <hr />
  <pre><code>const gridColumns: GridColDef[] = [
    {
       field: 'name',
       headerName: 'Name',
       flex: 5,
    },
    {
       field: 'type',
       headerName: 'Type',
       flex: 5,
       renderCell: (params) =&gt; params.row.type,
       renderEditCell: (params) =&gt; (
          &lt;DropDownTwo
             id={params.row.slsRid}
             value={{
                selectedValue: 'test',
                options: types,
                dropDownName: 'type',
                dropDownId: 'test',
                handleDropDownChange: updateObject,
                row: params.row,
             }}
             field={'type'}
          /&gt;
          ),
        }
  ];
  </code></pre>
  <hr />
  <pre><code>const DropDownTwo = (props: GridRenderCellParams&lt;DropDownProps&gt;) =&gt; {
    const { id, value, field } = props;
    const apiRef = useGridApiContext();
    const [selected, setSelected] = useState('');
  
    const handleChange = (e: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
       window.alert(e.target.value);
       apiRef.current.setEditCellValue({ id, field, value: e.target.value });
    };
  
    return (
       &lt;select
          data-selected={selected}
          data-id={dropDownId}
          data-name={dropDownName}
          value={selected}
          onChange={handleChange}
          style={{ height: '35px', width: '175px' }}
       &gt;
          {value.options.map((val) =&gt; (
             &lt;option key={val} value={val} onClick={() =&gt; setSelected(val)}&gt;
                {val}
             &lt;/option&gt;
          ))}
       &lt;/select&gt;
    );
  </code></pre>
  <p>}</p>