When I hover on ref={} I get:

Type 'RefObject<HTMLInputElement | null>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'RefObject<HTMLInputElement | null>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
      Type 'null' is not assignable to type 'HTMLInputElement'.ts(2322)

This is the component.

const NewTaskForm = ({ submitNewTaskHandler, newWishlistInputRef }: INewTaskForm) => {
    return (
        <form onSubmit={submitNewTaskHandler} className="flex justify-center items-center p-4 m-auto gap-2 bg-violet-400 rounded">
            <input
                ref={newWishlistInputRef}
                className="min-w-80 px-3 py-2"
                type="text"
                placeholder="Enter your next wish..." />
            <button className="text-xl shadow-md bg-blue-600 text-white hover:bg-blue-500 rounded-md px-3 py-1.5">Add</button>
        </form>
    )
}

The interface:

export interface INewTaskForm {
    submitNewTaskHandler: (event: FormEvent) => void;
    newWishlistInputRef: React.RefObject<HTMLInputElement | null>;
}

How do I fix that?