antdesign.js

import Select from '../src/component/Select';

function onChange(value) {
  console.log(`selected`, value);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}

const options = [
  { value: 'jack', label: 'jack' },
  { value: 'rose', label: 'rose' },
  { value: 'marry', label: 'marry' },
];
ReactDOM.render(
  <React.StrictMode>
    <Select
      showSearch
      allowClear
      labelInValue
      mode="multiple"
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
      onSearch={onSearch}
      filterOption={(input, option) =>
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      options={options}
    ></Select>
  </React.StrictMode>,
  document.getElementById('root')
);

select.js

import React from 'react';
import { Select } from 'antd';

const { Option } = Select;

const ITSSelect = ({ options, ...props }) => {
  const optionList = options.map((option) => {
    return <Option value={option.value}>{option.label}</Option>;
  });

  return <Select {...props}>{optionList}</Select>;
};

export default ITSSelect;