How to upgrade from V1 to V2? Need full examples - react-select

Question

I don't see any samples showing before and after view of the code for going from v1 to v2.
We have a wrapper for react-select in our file Select.jsx that in V1 contains
import React from 'react';
import ReactSelect from 'react-select';
import css from 'react-css-modules';
import globalStyles from '../../../node_modules/react-select/dist/react-select.css';
import styles from './Select.css';
/**
* Select component
* How do we style this?
*/
const Select = (props) => {
const onChange = values => {
props.multi ? props.onChange(_.map(values, obj => obj.value)) : props.onChange(values.value)
};
return <ReactSelect
multi={props.multi}
value={props.value}
options={props.options}
disabled={props.disabled}
placeholder={props.placeholder}
clearable={props.clearable}
className={`${props.type} ${props.kind}`}
tabSelectsValue={props.tabSelectsValue}
searchable={props.searchable}
optionComponent={props.optionComponent}
valueComponent={props.valueComponent}
onChange={onChange} />;
}
export default css(Select, styles);
A preliminary stab in the dark attempt to convert it (but not styling) to react-select V2 looks like:
import React from 'react';
import ReactSelect, { components } from 'react-select';
import css from 'react-css-modules';
import styles from './Select.css';
/**
* Select component
* How do we style this?
*/
const Select = (props) => {
const onChange = values => {
props.multi ? props.onChange(_.map(values, obj => obj.value)) : props.onChange(values.value)
};
const Options = (props) => {
return (
<components.Option {...props.optionComponent}/>
/*<components.ValueContainer {...props.valueComponent}/>*/
);
};
const MultiValueContainer = (props) => {
return (
<components.MultiValueContainer {...props.valueComponent}/>
);
};
return <ReactSelect
isMulti={props.multi}
value={props.value}
options={props.options}
isDisabled={props.disabled}
placeholder={props.placeholder}
isClearable={props.clearable}
className={`${props.type} ${props.kind}`}
tabSelectsValue={props.tabSelectsValue}
isSearchable={props.searchable}
components={{ Options, MultiValueContainer }}
onChange={onChange} />;
}
export default css(Select, styles);
A sample use in V1 looks like: