Another day, another TypeScript challenge with useRef.

How many times per day you swear when writing React code with TypeScript?..

Today I got this:

Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'.
        Type 'undefined' is not assignable to type 'HTMLInputElement | null'.ts(2322)

Hmmm, so my input's current property is not compatible. What exactly does it mean? I already declared my ref like this:

const inputRef = useRef<HTMLInputElement>();

Pulling my hair off, trying all kind of HTMLBlaBlaBlaElements, all I had to do was...

const inputRef = useRef<HTMLInputElement>(null);

Imagine if TypeScript would be able to actually give us proper hints. (where's the AI that all the people keep talking about??)