Leaflet Map Rendering Issue with Large Non-Geographical Map

I’m currently developing a non-geographical map for my website using React, tailwindCSS and react-leaflet. The map is square-shaped and quite large, with each side measuring 10 million pixels. The image overlay is a square with white color. I’ve followed the guides provided by both react-leaflet and leaflet documentation on https://leafletjs.com/examples/crs-simple/crs-simple.html, where I defined a specific bound to map the image to the corresponding scale.

However, I’ve encountered a problem where the image is not initially displayed (though it does appear when zooming out). Specifically, the map tends to disappear when I reach a certain zoom level (although the marker still remains). For normal maps (which I takes from the tutorial and is geographical map), it works normally, so I did setup leaflet correctly.

Below is the code for the map I encountered issues with (note that I am using react-leaflet):

<MapContainer
                // whenReady={setMapRef}
                center={[this.state.lat, this.state.lng]}
                zoom={this.state.zoom}
                className="h-dvh z-10"
                bounds={bounds}
                // maxBounds={bounds}
                // maxZoom={10}
                zoomControl={false}
                minZoom={-1000}
                maxZoom={7}
                crs={CRS.Simple}
                // zoomSnap={0}
            // maxNativeZoom={7}



            >
                <ImageOverlay
                    url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Blank_square.svg/2048px-Blank_square.svg.png"
                    bounds={bounds}
                    className="border box-border border-black"

                />
                <ZoomControl position="bottomleft" />
                <Marker position={[this.state.lat, this.state.lng]}>
                    <Popup>
                        This is the center
                    </Popup>
                </Marker>
                <Marker position={[51.5, +0.1]}>
                    <Popup>
                        This is the content
                    </Popup>
                </Marker>
            </MapContainer>

While inspecting the element through console, I’ve noticed that the glitch starts to occur when the map’s width and height exceed 10 million pixels to some extent, leading me to suspect that this might be the root of the issue. I tried to rectify this by setting the bounds to 20 million for each side, but the problem persists. I tried to look for leaflet documentation looking for anything related to zooms but to no avail. I’m at a loss as to how to resolve this issue and would greatly appreciate any assistance or suggestions. Thanks in advance!