Netlify CMS registerWidget ~ select box (not working)

index.js

CMS.registerWidget(
  'predefined_labels',
  createClass({
    getDefaultProps: function () {
      return {
        value: ''
      }
    },
    componentDidMount: async function () {
      // const _field = this.props.field;
      const _forID = this.props.forID;
      const _value = this.props.value;

      // const _fieldOptions = _field.get('options');
      // const _options = [..._fieldOptions.map(this.convertToOption)];
      // const _selectedValue = getSelectedValue({ options: _options, value });
      // console.log(_selectedValue);
      const _docunment = document;
      const _targetSelectElement = document.querySelector('#' + _forID);
      console.log(_targetSelectElement);
      console.log(this);
      const { loadEntry } = this.props;
      console.log(loadEntry);
      const result = await loadEntry('settings', 'menu_settings');
      const _predefinedLabels = (result.data.predefiened_labels) ? result.data.predefiened_labels : [];
      console.log(_predefinedLabels);
      _predefinedLabels.forEach(currentLabelData => {
        let _optionElement = _docunment.createElement('option');
        _optionElement.innerHTML = currentLabelData.label_text;
        _optionElement.value = currentLabelData.label_style;
        if (_value === currentLabelData.label_style) {
          _optionElement.setAttribute("selected", "selected");
        }
        _targetSelectElement.appendChild(_optionElement);
      });
    },
    convertToOption: function (raw) {
      if (typeof raw === 'string') {
        return { label: raw, value: raw };
      }
      return Map.isMap(raw) ? raw.toJS() : raw;
    },
    optionToString: function (option) {
      return option && option.value ? option.value : null;
    },
    getSelectedValue: function ({ value, options }) {
      return find(options, ['value', value]) || null;
    },
    handleChange: function (selectedOption) {
      const { onChange, field } = this.props;
      const isEmpty = !selectedOption;
      if (field.get('required') && isEmpty && isMultiple) {
        onChange(List());
      } else if (isEmpty) {
        onChange(null);
      } else {
        onChange(this.optionToString(selectedOption));
      }
    },
    render: function () {
      return h('select', { onChange: this.handleChange, id: this.props.forID, className: this.props.classNameWrapper, value: this.props.value });
      /*
      try {
        const result = await loadEntry('settings', 'menu_settings');
        let { data } = result.payload.entry;
      } catch (err) {
        let data = {};
      }
      console.log(data);
      */
      /*
      const _entry = this.props.entry;
      const _predefiened_labels = _entry.getIn(['data', 'predefiened_labels']);
      const _currentlySelectedValue = this.props.value;
      const _currentMenuLabel = (_currentlySelectedValue) ? labelItem.split('||||') : ['', ''];
      const _classNameWrapper = this.props.classNameWrapper;
      const _forID = this.props.forID;
      let _currentValueExists = false;
      return h('select', { id: _forID, className: _classNameWrapper, value: _currentMenuLabel[1] },
        (_predefiened_labels) ?
          _predefiened_labels.map(function (labelItem, index) {
            const _labelText = labelItem.getIn(['data', 'label_text']);
            const _labelStyle = labelItem.getIn(['data', 'label_style']);
            const _optionValue = encodeURI(_labelText) + '|||' + encodeURI(_labelStyle);
            if (_optionValue === _currentlySelectedValue) _currentValueExists = true;
            return h('option', { value: _optionValue }, _labelText);
          }) : '',
        (_currentValueExists) ? h('option', { value: 'TEST' }, 'TEST') : ''
      );
      */
    }
  })
);