How to use the semantic-ui-react.Form function in semantic-ui-react

return _react2['default'].createElement(
          _formsyReact2['default'],
          _extends({
            noValidate: true,
            ref: function () {
              function ref(_ref2) {
                return _this2.formsyForm = _ref2;
              }

              return ref;
            }(),
            onSubmit: onSubmit
          }, nonSemanticUIFormProps),
          _react2['default'].createElement(
            _semanticUiReact.Form,
            _extends({ as: as }, nonFormsyReactFormProps),
            children
          )
        );
      }

selection: true,
              search: true,
              defaultValue: this.state[propName + 'DefaultValue'],
              options: options
            }) : null
          );
        } else if (type === 'markdown') {
          DOM = _react2.default.createElement(_Markdown2.default, {
            key: idx,
            id: '' + pr + propName,
            value: value,
            label: fields[propName].label,
            onEdit: this.editText
          });
        } else {
          DOM = _react2.default.createElement(_semanticUiReact.Form.Field, {
            key: idx,
            label: fields[propName].label,
            control: control,
            type: type,
            id: '' + pr + propName,
            defaultValue: value,
            defaultChecked: checked,
            onInput: this.checkOnEnterIfTextarea,
            disabled: disabled,
            placeholder: propName
          });
        }
      }
      return DOM;
    }
  }, {

getValue = _props3.getValue,
            defaultValue = _props3.defaultValue,
            multiple = _props3.multiple,
            errorLabel = _props3.errorLabel,
            getErrorMessage = _props3.getErrorMessage,
            isValid = _props3.isValid,
            isPristine = _props3.isPristine,
            as = _props3.as,
            width = _props3.width,
            className = _props3.className,
            disabled = _props3.disabled,
            inline = _props3.inline,
            passRequiredToField = _props3.passRequiredToField;


        var shortHandMode = inputAs === _semanticUiReact.Form.Dropdown || inputAs === _semanticUiReact.Form.Select;
        var error = !isPristine() && !isValid() && this.state.allowError;

        var dropdownProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
          onChange: this.handleChange,
          onBlur: this.handleBlur,
          onClose: this.handleClose,
          value: getValue() || defaultValue || multiple && [] || '',
          error: !disabled && error,
          id: id
        });

        var dropdownNode = shortHandMode ? (0, _react.createElement)(inputAs, dropdownProps).props.control : inputAs;

        return _react2['default'].createElement(
          _semanticUiReact.Form.Field,
          {

),
            _react2.default.createElement(
              _semanticUiReact.Button,
              {
                type: 'submit',
                color: 'black',
                id: currentItemId,
                onClick: !schema.resolvers.remove ? null : remove,
                disabled: !schema.resolvers.remove || !schema.resolvers.remove.allowed
              },
              'remove'
            )
          ),
          _react2.default.createElement(
            _semanticUiReact.Grid,
            { as: _semanticUiReact.Form },
            _react2.default.createElement(
              _semanticUiReact.Grid.Row,
              { columns: 2 },
              _react2.default.createElement(
                Column,
                { computer: 8, mobile: 16 },
                fields.slice(0, to).map(function (field, idx) {
                  return generateFields(field, idx, data);
                })
              ),
              _react2.default.createElement(
                Column,
                { computer: 8, mobile: 16 },
                fields.slice(-from).map(function (field, idx) {
                  return generateFields(field, idx, data);
                })

disabled = _props2.disabled,
            inline = _props2.inline,
            passRequiredToField = _props2.passRequiredToField;


        var error = !isPristine() && !isValid();

        var checkboxProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
          checked: getValue(),
          onChange: this.handleChange
        });

        if (inputAs === _semanticUiReact.Checkbox || inputAs === _semanticUiReact.Radio) delete checkboxProps.error;

        return _react2['default'].createElement(
          _semanticUiReact.Form.Field,
          {
            as: as,
            className: className,
            required: required && passRequiredToField,
            error: error,
            width: width,
            inline: inline,
            disabled: disabled
          },
          (0, _react.createElement)(inputAs, _extends({}, checkboxProps)),
          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
        );
      }

Form.Input = function (props) {
  return _react2['default'].createElement(_FormsyInput2['default'], _extends({ inputAs: _semanticUiReact.Form.Input }, props));
};

return _this4.addSelectOption(e, {
                    fields: fields[propName].nestedFields,
                    label: fields[propName].list.label
                  });
                }
              },
              'add'
            )
          )
        ),
        _react2.default.createElement(
          _semanticUiReact.Modal.Content,
          null,
          _react2.default.createElement(
            _semanticUiReact.Grid,
            { as: _semanticUiReact.Form },
            _react2.default.createElement(
              _semanticUiReact.Grid.Column,
              { computer: 8, mobile: 16 },
              fields[propName].nestedFields.slice(0, to).map(function (field, idx) {
                return _this4.generateFields(field, idx, false, false, propName + '/');
              })
            ),
            _react2.default.createElement(
              _semanticUiReact.Grid.Column,
              { computer: 8, mobile: 16 },
              fields[propName].nestedFields.slice(-from).map(function (field, idx) {
                return _this4.generateFields(field, idx, false, false, propName + '/');
              })
            )
          )
        )

passRequiredToField = _props2.passRequiredToField;
        var allowError = this.state.allowError;

        var error = !isPristine() && !isValid() && allowError;

        var inputProps = _extends({}, (0, _utils.filterSuirElementProps)(this.props), {
          value: getValue() || isPristine() && defaultValue || '',
          onChange: this.handleChange,
          onBlur: this.handleBlur,
          className: inputClassName,
          error: !disabled && error,
          label: label,
          id: id
        });

        var shortHandMode = inputAs === _semanticUiReact.Form.Input || inputAs === _semanticUiReact.Form.TextArea;
        var inputNode = shortHandMode ? (0, _react.createElement)(inputAs).props.control : inputAs;

        if (shortHandMode) {
          delete inputProps.label;
          if (inputAs === _semanticUiReact.Form.TextArea) delete inputProps.error;
        }

        return _react2['default'].createElement(
          _semanticUiReact.Form.Field,
          {
            as: as,
            className: className,
            required: required && passRequiredToField,
            error: !disabled && error,
            width: width,
            inline: inline,

}()
  }]);

  return FormsyCheckbox;
}(_react.Component);

FormsyCheckbox.propTypes = {
  name: _propTypes2['default'].string.isRequired,
  as: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].node]),
  width: _propTypes2['default'].number,
  className: _propTypes2['default'].string,
  inputClassName: _propTypes2['default'].string,
  disabled: _propTypes2['default'].bool,
  inline: _propTypes2['default'].bool,
  passRequiredToField: _propTypes2['default'].bool,
  inputAs: _propTypes2['default'].oneOf([_semanticUiReact.Form.Checkbox, _semanticUiReact.Form.Radio, _semanticUiReact.Checkbox, _semanticUiReact.Radio]),
  defaultChecked: _propTypes2['default'].bool,
  setValue: _propTypes2['default'].func.isRequired,
  isValid: _propTypes2['default'].func.isRequired,
  getValue: _propTypes2['default'].func.isRequired,
  isPristine: _propTypes2['default'].func.isRequired,
  required: _propTypes2['default'].bool,
  getErrorMessage: _propTypes2['default'].func.isRequired,
  errorLabel: _propTypes2['default'].element,
  onChange: _propTypes2['default'].func
};
FormsyCheckbox.defaultProps = {
  inputAs: _semanticUiReact.Checkbox
};
exports['default'] = (0, _formsyReact.withFormsy)(FormsyCheckbox);