Reference problem with external UI library in React Hook Form - react-select

Question

I'm using the ReactSelect component, however, I created a component called Select and ReactSelect is in there:
interface IProps extends ISelectProps {
tabIndex: string;
required: boolean;
isClearable: boolean;
isDisabled: boolean;
placeholder: string;
options: {
label: string;
value: string;
}[];
}
const Select = ({ ...props }: IProps) => <ReactSelect {...props} />;
export default Select
;
The error is as follows:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Controller`.
at Select
Here's the code:
<form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete='off'>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
{API.map(({ id, order, htmlControl }) => (
<Controller
key={id}
name={id}
control={control}
render={({ field, fieldState: { error } }) => (
<>
{htmlControl.type === 'PARAMETER_TYPE_SELECT' && (
<Select
{...field}
isClearable={true}
error={!!error}
tabIndex={order.toString()}
required={htmlControl.isRequired}
isDisabled={htmlControl.isDisabled}
placeholder={htmlControl.placeholder}
options={htmlControl.options}
/>
)}
{htmlControl.type !== 'PARAMETER_TYPE_SELECT' && (
<input
required={htmlControl.isRequired}
disabled={htmlControl.isDisabled}
placeholder={htmlControl.placeholder}
/>
)}
</>
)}
/>
))}
</div>
<input type='submit' />
</form>
I'm following exactly like the official documentation and I can't understand why it can't get the reference.

Answer 1

As you read the warning, it says you are attempting to assign ref attribute to a functional component which is not correct, you should not use the ref attribute on function components because they don’t have instances. To solve your problem you can define your Select component by using React.forwardRef like this:
const Select = React.forwardRef(({ ...props }, ref) => (
<ReactSelect {...props} ref={ref} />
));