Displaying offline satellite maps using react-leaflet

Question

I am working on a react project where i want to display satellite maps and they have to be offline maps since the project that i am working on is completely offline. I have created satellite map (XYZ tiles) of the small area i am working on using QGIS and i saved it locally in my project directory. I run a node server locally for my react project i serve those map tiles to my react app through this node server. In my react project, I use react-leaflet library to display the offline satellite map and i display the location of a robot on the map with a marker. I also use react-leaflet-draw library to draw shapes on the map. (let me know if anyone need more context on the use case of this application)

enter image description here

It works great but the only problem with this setup is that the XYZ tiles are too big in size (1 or 2 GB for a small area).

Question: Is there any other file formats i can download these satellite maps that are smaller in size ?

Any help would be much appreciated !

Also i tried using mbtiles format from QGIS but couldn't display the map using react-leaflet library.