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