Need pattern for typescript when use useRef-CodePudding

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

CodePudding user response：

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

Try this.