I am getting this TypeScript error when I use forwardRef in my Select component while using react-select.
Type 'ForwardedRef<HTMLInputElement>' is not assignable to type
'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'.
import Select from "react-select";
export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>(
(props, ref) =>{
...
return(
<div>
<Select
key="random-key"
ref={ref}
....
/>
</div>
)
}
)
I used the same type and forwardRef with an input element and everything seems to be fine but I having issues here. I have tried several solution such as this one useRef TypeScript – not assignable to type LegacyRef<HTMLDivElement> it didn’t work for me.
This is a full log of the error
Type 'ForwardedRef<HTMLInputElement>' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: Select<Option, false, GroupBase<Option>> | null) => void | (() => VoidOrUndefinedOnly)'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'Select<Option, false, GroupBase<Option>> | null' is not assignable to type 'HTMLInputElement | null'.
Type 'Select<Option, false, GroupBase<Option>>' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 352 more.