See https://react-select.com/home.

We also add the prop selectedValue so you don't need to find the option yourself which is a lot more convienient.  IE: selectedValue={ 1 } vs value={ { value: 1, label: 'Charlie' } }

```js
import { Select, MultiValueLabel, CountryFlag } from 'frontend-react-components';

const options = [
    { label: 'python', value: 1 },
    { label: 'javascript', value: 2 },
    { label: 'c#', value: 3 },
    { label: 'cobol', value: 4 }
];

const countryOptions = [
    { label: 'United States', value: 'US' },
    { label: 'World Wide', value: 'GLOBAL' },
    { label: 'Canada', value: 'CA' },
];

const formatOptionLabel = (optionProps) => {
    const { label: countryName, value: countryCode } = optionProps;
    return (
        <div>
            <CountryFlag countryCode={ countryCode } />
            <div style={ { marginLeft: '8px', display: 'inline-block' } }>{countryName}</div>
        </div>
    );
};


initialState = { selectValue: null, multiLabelValue: [options[0], options[1]], multiValue: [], country: null };

<div>
    <h6>Normal select</h6>
    <Select
        placeholder="Placeholder text"
        options={options}
        value={ state.selectValue }
        onChange={ (value) => setState({ selectValue: value }) }
    />

    <hr/>

    <h6>Select with custom MultiLabel</h6>
    <Select
        closeMenuOnSelect={false}
        components={{ MultiValueLabel }}
        isMulti
        styles={{
            multiValueLabel: baseProps => {
                return Object.assign(baseProps, {
                    backgroundColor: 'yellow',
                    color: 'black'
                });
            },
        }}
        options={options}
        value={ state.multiLabelValue }
        onChange={ (value) => setState({ multiLabelValue: value }) }
    />

    <hr/>
    <h6>Select with multi select</h6>
    <Select
        closeMenuOnSelect={false}
        isMulti
        defaultValue={[options[0], options[1]]}
        options={options}
        value={ state.multiValue }
        onChange={ (value) => setState({ multiValue: value }) }
    />

    <hr/>
    <h6>Select with flags</h6>
    <Select
        placeholder="Placeholder text"
        options={ countryOptions }
        value={ state.country }
        onChange={ (value) => setState({ country: value }) }
        formatOptionLabel={ formatOptionLabel }
    />
</div>
```