Function components cannot be given refs

[tbysp]

On the latest version (4.0.10, but upgrading from 4.0.1 as there were some type issues before) we'll get the following errors when rendering. The date picker isn't working anymore when passing a ref to <Flatpickr>. Maybe one of the recent changes caused this?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Warning: M: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

const datePickerInstance = useRef<DateTimePickerHandle>(null);
const inputRef = useRef<HTMLInputElement>(null);

[...]

<Flatpickr ref={datePickerInstance} options={{...}}>
    <input ref={inputRef} ... />
</Flatpickr>

[jasonsyoung]

can you create a jsfiddle or sample js file to show me the error?

[tbysp]

I did some more debugging. The (console) errors are already appearing when just adding a "ref" to <Flatpickr>. But the date picker breaking seems to have another cause, we have quite some custom code so that might be on our side.