Need pattern for typescript when use useRef

Issue

const CanvasMap = () => {
      const canvasFef = React.useRef<HTMLInputElement>(null)
      useEffect(() => {
        canvasFef && canvasFef.current && cities.forEach(function (item) {
             // logic here
        })
      }, [canvasFef]);
      return (
          <canvas id="canvas"
                  ref={canvasFef}
          ></canvas>
      )
    };

I got error

Property 'getContext' does not exist on type 'HTMLInputElement'

TS2322: Type 'MutableRefObject' is not assignable to type 'LegacyRef'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement' is missing the following properties from type 'HTMLCanvasElement': captureStream, getContext, toBlob, toDataURL

Solution

const canvasFef = React.useRef<HTMLCanvasElement | null>(null);

Try this.

Answered By - kyun