How to use the react-select.Creatable function in react-select

render() {
    let SelectComponent = this.props.creatable ? ReactSelect.Creatable : ReactSelect;
    return  ({value: k, label: v}))}
             multi={this.props.multi}
             placeholder={'Search...'}
             style={{width: this.props.width}}
             openOnFocus={true}
             autoFocus={true}
             value={this.state.value}
             escapeClearsValue={false}
             onInputKeyDown={(e) => {
                 if (e.which == 27) { // ESC
                   if (this.props.multi) {
                     let v = this.state.value;
                     if (v === null || v === []) {
                       this.props.onClose();
                     } else {

let inputNote;
  if (required) {
    inputNote = <span>required</span>;
  }

  let reactSelectClasses = cssClass.REACT_SELECT;
  if (readOnly) {
    reactSelectClasses += ` ${cssClass.READ_ONLY}`;
  }

  let SelectComponent = ReactSelect;
  if (creatable &amp;&amp; lazy) {
    SelectComponent = ReactSelect.AsyncCreatable;
  } else if (creatable) {
    SelectComponent = ReactSelect.Creatable;
  } else if (lazy) {
    SelectComponent = ReactSelect.Async;
  }

  // The label container must be returned after the ReactSelect otherwise it does not get displayed
  // in the browser.
  return (
    <div>
      <div id="{id}">
        </div></div>

const MultiSelect = ({ id, name, async, onChange, creatable, className = '', edited, value = [], ...rest }) => {
  const SelectComponent = async ? Select.Async : (creatable ? Select.Creatable : Select)
  return (
    
       onChange({ target: { name, value: v.map(i => i.value) } })}
        {...rest}
      />
    
  )
}

render() {
    const {
      async,
      creatable,
      searchable,
      label,
      className,
      ...props
    } = this.props;

    let SelectClass;
    if (async) {
      SelectClass = creatable ? ReactSelect.AsyncCreatable : ReactSelect.Async;
    } else {
      SelectClass = creatable ? ReactSelect.Creatable : ReactSelect;
    }

    return (
      <div>
        {label &amp;&amp;
          <label>
            {label}
          </label>}
         this.select = ref}
        /&gt;</div>

value.push({ value: i, label: tag });
            } else {
              options.push({ value: i, label: tag });
            }
          });

          var className = void 0;
          if (isMissing) {
            className = "missing";
          }

          return {
            v: _react2.default.createElement(
              "div",
              null,
              _react2.default.createElement(_reactSelect.Creatable, {
                key: "bob",
                className: className,
                multi: true,
                disabled: _this3.props.disabled,
                placeholder: "Select tags...",
                allowCreate: true,
                value: value,
                options: options,
                onChange: function onChange(value) {
                  return _this3.handleChange(value);
                }
              }),
              _react2.default.createElement("div", { className: "help-block" })
            )
          };
        }();

if (_this3.props.value.contains(tag)) {
                        value.push({ value: i, label: tag });
                    } else {
                        options.push({ value: i, label: tag });
                    }
                });

                var className = void 0;
                if (isMissing) {
                    className = "missing";
                }

                return _react2.default.createElement(
                    "div",
                    null,
                    _react2.default.createElement(_reactSelect.Creatable, {
                        key: "bob",
                        className: className,
                        multi: true,
                        disabled: this.props.disabled,
                        placeholder: "Select tags...",
                        allowCreate: true,
                        value: value,
                        options: options,
                        onChange: function onChange(value) {
                            return _this3.handleChange(value);
                        }
                    }),
                    _react2.default.createElement("div", { className: "help-block" })
                );
            } else {
                var tagStyle = {

{selects.map((select, i) => {
            const disabled = this.getDisabledAttribute(i);
            const options = Array.from(this.getOptions(i));
            const selectedOptions = this.selectedOptions();

            let selectedOption = null;
            if (selectedOptions && selectedOptions[i] && (selectedOptions[i].value || selectedOptions[i].value === 0)) {
              selectedOption = selectedOptions[i];
            }

            let SelectComponent = Select;
            if (select.allowCreate) {
              SelectComponent = Select.Creatable;
            }

            return (
              <div id="{select.id}">
                {(select.title !== this.props.translation.instruction) &amp;&amp;
                  <div>{select.title}</div>}
                 `Press enter or tab for ${label}…`}
                  shouldKeyDownEventCreateNewOption={({ keyCode }) =&gt; keyCode === 9 || keyCode === 13}
                  matchPos="start"</div>