How to use the grommet.Select function in grommet

options = _useState[0],
      setOptions = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      value = _useState2[0],
      setValue = _useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, {
    size: "medium",
    placeholder: "Select",
    value: value,
    options: options,
    onChange: function onChange(_ref) {
      var option = _ref.option;
      return setValue(option);
    },
    onClose: function onClose() {
      return setOptions(defaultOptions);
    },
    onSearch: function onSearch(text) {
      // The line below escapes regular expression special characters:
      // [ \ ^ $ . | ? * + ( )
      var escapedText = text.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'); // Create the regular expression with modified value which
      // handles escaping special characters. Without escaping special

message: '4-6 digits'
    }
  }), _react["default"].createElement(_grommet.FormField, {
    name: "subscribe",
    component: _grommet.CheckBox,
    pad: true,
    label: "Subscribe?"
  }), _react["default"].createElement(_grommet.FormField, {
    name: "ampm",
    component: _grommet.RadioButtonGroup,
    pad: true,
    options: ['morning', 'evening']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Size",
    name: "size",
    component: _grommet.Select,
    onChange: function onChange(event) {
      return console.log(event);
    },
    options: ['small', 'medium', 'large', 'xlarge']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Comments",
    name: "comments",
    component: _grommet.TextArea
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Age",
    name: "age",
    component: _grommet.RangeInput,
    pad: true,
    min: 15,
    max: 75
  }), _react["default"].createElement(_grommet.Box, {

plain: true,
    size: "small",
    options: ['grommet', 'dark', 'hpe', 'aruba', 'hp', 'dxc', 'v1'],
    value: themeName,
    onChange: function onChange(event) {
      return setThemeName(event.option);
    }
  })), themeCanMode && _react["default"].createElement(_grommet.CheckBox, {
    label: "dark",
    checked: themeMode === 'dark',
    onChange: function onChange() {
      return setThemeMode(themeMode === 'dark' ? 'light' : 'dark');
    }
  }), !themeCanMode && _react["default"].createElement(_grommet.Box, {
    basis: "small"
  }, _react["default"].createElement(_grommet.Select, {
    plain: true,
    placeholder: "background",
    size: "small",
    options: ['default', 'dark-1', 'light-1'],
    value: background,
    onChange: function onChange(event) {
      return setBackground(event.option);
    }
  })), _react["default"].createElement(_grommet.Box, {
    basis: "small"
  }, _react["default"].createElement(_grommet.RangeInput, {
    min: 16,
    max: 36,
    step: 2,
    value: baseSize,
    onChange: function onChange(event) {

var FormFieldSelect = function FormFieldSelect(props) {
  var _useState = (0, _react.useState)(''),
      value = _useState[0],
      setValue = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "select"
  }, props), _react["default"].createElement(_grommet.Select, {
    id: "select",
    placeholder: "placeholder",
    options: _data.allOptions,
    value: value,
    onChange: function onChange(_ref) {
      var option = _ref.option;
      return setValue(option);
    }
  }))));
};

}));
  };

  var onChange = function onChange(_ref2) {
    var nextSelected = _ref2.selected;
    return setSelected(nextSelected);
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, {
    multiple: true,
    closeOnChange: false,
    placeholder: "select an option...",
    selected: selected,
    options: options,
    dropHeight: "medium",
    onMore: onMore,
    onClose: onClose,
    onChange: onChange
  }, function (option, index) {
    return _react["default"].createElement(Option, {
      value: option,
      selected: selected.indexOf(index) !== -1
    });
  })));
};

var options = ['one', 'two'];

  var _useState = (0, _react.useState)(''),
      value = _useState[0],
      setValue = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, _extends({
    id: "select",
    name: "select",
    placeholder: "Select",
    value: value,
    options: options,
    onChange: function onChange(_ref2) {
      var option = _ref2.option;
      return setValue(option);
    },
    plain: true,
    valueLabel: _react["default"].createElement(_grommet.Box, {
      background: "brand",
      width: "small",
      round: "small",
      overflow: "hidden",
      align: "center"

return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: theme || _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large",
    gap: "small"
  }, _react["default"].createElement(_grommet.Button, {
    onClick: function onClick() {
      return setOpen(!open);
    },
    label: "Control the select"
  }), _react["default"].createElement(_grommet.Select, _extends({
    id: "select",
    name: "select",
    placeholder: "Select",
    open: open,
    value: value,
    options: options,
    onChange: function onChange(_ref2) {
      var option = _ref2.option;
      return setValue(option);
    }
  }, rest))));
};

href: ""
  }, "Anchor"), _react["default"].createElement(_grommet.Menu, {
    label: "Menu",
    items: [{
      label: 'One',
      onClick: function onClick() {}
    }, {
      label: 'Two'
    }]
  }), _react["default"].createElement(_grommet.Button, {
    label: "Button",
    onClick: function onClick() {}
  })), _react["default"].createElement(_grommet.Box, {
    key: "input",
    gap: "small"
  }, _react["default"].createElement(_grommet.Select, {
    placeholder: "Select",
    options: ['One', 'Two'],
    onChange: function onChange() {}
  }), _react["default"].createElement(_grommet.CheckBox, {
    name: "check",
    checked: checkBox,
    label: "CheckBox",
    onChange: function onChange(event) {
      return setCheckBox(event.target.checked);
    }
  }), _react["default"].createElement(_grommet.CheckBox, {
    name: "toggle",
    toggle: true,
    checked: checkBox,
    label: "CheckBox toggle",
    onChange: function onChange(event) {

selected = _React$useState[0],
      setSelected = _React$useState[1];

  var _React$useState2 = _react["default"].useState(dummyOptions),
      options = _React$useState2[0],
      setOptions = _React$useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, {
    multiple: true,
    closeOnChange: false,
    placeholder: "select an option...",
    selected: selected,
    options: options,
    dropHeight: "medium",
    onClose: function onClose() {
      return setOptions(options.sort(function (p1, p2) {
        var p1Exists = selected.includes(p1);
        var p2Exists = selected.includes(p2);

        if (!p1Exists && p2Exists) {
          return 1;
        }

        if (p1Exists && !p2Exists) {

};
  };

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _theme.theme
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "center",
    width: "medium"
  }, _react["default"].createElement(_SearchInputContext.SearchInputContext.Provider, {
    value: {
      searching: searching
    }
  }, _react["default"].createElement(_grommet.Select, {
    ref: selectRef,
    closeOnChange: false,
    placeholder: "Select Content Partners",
    searchPlaceholder: "Search Content Partners",
    emptySearchMessage: "No partners found",
    multiple: true,
    value: selectedContentPartners.length ? renderContentPartners() : undefined,
    selected: selectedContentPartners.map(function (option) {
      return contentPartners.indexOf(option);
    }),
    options: contentPartners,
    onChange: function onChange(_ref3) {
      var option = _ref3.option;
      var newSelectedPartners = [].concat(selectedContentPartners);
      var seasonIndex = newSelectedPartners.map(function (_ref4) {
        var name = _ref4.name;