Obtaining visible Map Data as an Image in React-Leaflet

Question

I'm working on a ReactJS application that utilizes react-leaflet to display maps, supporting both OpenStreetMap and TIFF formats. My goal is to implement an upscale/digital zoom feature when the zoom level exceeds 21. After researching, I've identified the Sharp library as a potential solution.

Here's where I'm facing challenges:

1. How can I capture the visible map data(red in attached image) on the screen when the zoom level exceeds 21 in the react-leaflet map? This involves determining parameters such as x-offset, y-offset (whether map-based or pixel-based), width, height, and pixel conversion corresponding to the data based on the zoom factor.
2. Once I have the map data, how can I efficiently send it to the backend for processing using the Sharp library?
3. How can I display the processed image as an overlay on the map after receiving it from the backend?

I would appreciate any guidance or code snippets that could help me accomplish this task. Thank you!

UPDATE:

I tried to put what I am trying to achieve in (1) codesandbox. In this I figured out viewport width and height. The challenge is now how to get map data using the offset and this width and height.