Alternatively, you can try preact [1] or inferno [2] and for a few KB more you have something that is still smaller than Google Maps or Leaflet.
Of course if you need more advanced features and geometric calculations the size can go up considerably. Leaflet and Google Maps provide that out of the box. Pigeon-maps doesn't.
You can also strip Leaflet down to just the raster tile layer stuff and as it doesn't need react or preact or inferno it will be lighter weight than your solution, and still uses the fundamental underlying display mechanism of image tags.
I have never claimed it to match the features of Leaflet while being lighter. It's lighter exactly because it doesn't. Offloading a lot of DOM work to React makes it even lighter.
Edit: to correct one point, pigeon-maps does support mobile.
What exactly does this mean? The only thing that ever changes, as I mentioned, is the src of the image tags in these kinds of tiled maps. How do you get better performance for updating the src attributes in a grid of images of constant size (256x256 tiles or whatever) other than img.src = ''? That's literally the only DOM manipulation being done, there is no "magic".
Also you can reduce a lot of your mouse event handling stuff down to a single "reactive" (haha) callback by doing something like this: https://github.com/mikolalysenko/mouse-event. Instead of binding a bunch of different handlers, the browser's mouse events API is still bizarre after all these years. Should just be a single event that gets sent the state of control input.
What about markers?