Using Optionrenderer With Select.aysnc (react-select)

I can't find in the documentations how to use optionRenderer prop with react-select async (Select.Async) here is a question that already been answered, but the renderOptions is not

Solution 1:

so for those who are looking for the answer, this is what I ended up using and it does the job: (unrelated code has been removed to keep the snippet concise)

importAsyncSelectfrom'react-select/async';
import { components } from'react-select';

constOption = props => {
    return (
        <components.Option {...props} >
            {props.data.label}<br/><smallstyle={{color: 'gray'}}>
                {props.data.manufacturerName || 'Unknown'} | {props.data.assetGroupDescription || 'Unknown'}
            </small></components.Option>
    )};

classFilterDropDownMenuextendsComponent {

render() {
    return (
        <><labelhtmlFor={id}>{translate(placeholder)}</label><AsyncSelect
                {...this.props}
                isClearableonChange={(value,e) => {
                    this.onDropDownFilterChange(value, e)
                }}
                onMenuScrollToBottom={this.fetchDropDownNextPage}
                defaultOptions={defaultOptions}
                defaultValue={defaultValue}
                styles={hasError ? customStyles : undefined}
                components={{ Option }}
            />
        </>
    )
   }
}

This way, I get the formatting that I want, And I don't loose the built in functionality of react-select (mouse events and styling and so on).