Проблема с написанием собственного редактора для React-Data-Grid

Question

Из официальной документации здесь о написании пользовательских редакторов - https://adazzle.github.io/react-data-grid/docs/examples/custom-editors

И пример здесь с использованием пользовательского средства выбора цвета - https://codesandbox.io/s/l9ko3oqwym?from-embed

А также некоторые другие существующие редакторы из React-Data-Grid-Addons - https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons/src/editors

Итак, я попытался написать свой собственный редактор, который в основном представляет собой выпадающий список с категорией.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class CustomDropdown extends Component {
  constructor(props){
    super(props);
    this.state = {
      val : props.value
    }
  }

  getInputNode = () => {
    return ReactDOM.findDOMNode(this);
  }

  onChange = evt => {
    this.setState( 
      { val : evt.target.value }, 
      () => this.props.onCommit() 
    );
  }

  getValue = () => {  
    let updated = {};
    return updated[ this.props.column.key ] = this.state.val;
  }

  getStyle = () => {
    return {
      width: '100%',
      height: '100%'
    }
  }

  disableStyle = () => {
    return {
      backgroundColor: '#A4A4A4',
      fontWeight: 600,
      color: '#FFF'
    }
  }

  createOptions = () => {
    let options = [];
    this.props.options.forEach( group => {
      options.push( <option key={group.category} style={this.disableStyle()} disabled>{group.category}</option> );
      group.child.forEach( opt => {
        options.push( <option key={opt.label} value={opt.value}>{opt.label}</option> )
      });
    });

    return options;    
  }

  render() {
    return (
      <select style={this.getStyle()} defaultValue={this.props.value} onBlur={this.props.onBlur} onChange={this.onChange} >
        {this.createOptions()}
      </select>
    );
  }
}

export default CustomDropdown;

И фиктивные данные, которые генерируют опции

const mockList = [
  {
    category: 'Header A',
    child: [
      { label: 'Label 1-A', value: 'Label 1-A' },
      { label: 'Label 2-A', value: 'Label 2-A' },
      { label: 'Label 3-A', value: 'Label 3-A' }
    ]
  },
  {
    category: 'Header B',
    child: [
      { label: 'Label 1-B', value: 'Label 1-B' },
      { label: 'Label 2-B', value: 'Label 2-B' },
      { label: 'Label 3-B', value: 'Label 3-B' }
    ]
  },
  {
    category: 'Header C',
    child: [
      { label: 'Label 1-C', value: 'Label 1-C' },
      { label: 'Label 2-C', value: 'Label 2-C' },
      { label: 'Label 3-C', value: 'Label 3-C' }
    ]
  }
];

И пользовательское выпадающее меню вызывается внутри определения столбца таблицы данных

const Cols = [
  {
    key: 'id',
    name: 'No',
    width: 60
  },
  {
    key: 'category',
    name: 'Category',
    width: 170,
    editor: <CustomDropdown options={mockList} />
  }
];

<ReactDataGrid
  columns={cols}
  /* And some other properties in here */
/>

Я получил всеПользовательский интерфейс готов и работает, и он хорошо отображается в таблице.

Но проблема в том, что он не может обновить данные доТаблица. Я пытался выбрать значение из выпадающего меню, но оно не обновляло значение ячейки. Когда я выделяю ячейку и нажимаю ввод, в надежде открыть опции, когда нажимаю ввод, но вместо этого все приложение стало капать.

Нужна помощь, чтобы узнать, как заставить работать пользовательский редактор. Я внимательно следовал приведенному выше примеру и убедился, что ничего не пропустил, но написание компонента класса - это не то, что мне хорошо (я больше увлекаюсь), поэтому я не уверен, что я сделал что-то не так в фрагментевыше.