react-select + react-hook-form

select.tsx

import { forwardRef } from 'react';
import Select from 'react-select';
import { Controller } from 'react-hook-form';
import type { RefObject } from 'react';
import type { Props as ReactSelectProps } from 'react-select';

const Select = forwardRef(
    (props: SelectProps, ref: RefObject<HTMLSelectElement>) => {
        return (
            <Controller
                ref={ref}
                as={<Select options={props.options} />}
                onChange={([selected]) => {
                    console.log('selected = ', selected);
                    return selected;
                }}
                {...props}
            />
        );
    }
);

export type SelectProps = ReactSelectProps & {
    controllerProps?: any;
};

export default Select;