react-leaflet marker click error (cannot read properties of undefined)

Question

I'm trying to make a custom fantasy map with react-leaflet.

When I'm creating a new marker and then click on it, the app throw me an error cannot read properties of undefined (reading 'x'). I learned nothing about this kind of error in the documentation...

import {CRS} from "leaflet/src/geo";
import {MapContainer, Marker, Popup, TileLayer, useMapEvents} from "react-leaflet";
import "./globals.css"


function App() {

    const styles = {
        map: {
            height: "100vh", width: "100vw"
        }
    }

  return (
    <div className="App">
        <div style={styles.map}>
            <MapContainer
                doubleClickZoom={false}
                crs={CRS.Simple}
                maxBounds={[
                    [-32.20, 7],
                    [-210, 250]
                ]}
                center={[-130, 160]}
                zoom={2.5}
                minZoom={2}
                maxZoom={5}
                zoomSnap={0}
                continuousWorld={false}
                noWrap={true}
                style={{ height: "100vh", width: "100vw" }}
            >
                <TileLayer url={"./map/{z}/{x}/{y}.png"} />

                <Marker position={[-130, 160]}>
                    <Popup>
                        example popup
                    </Popup>
                </Marker>
                
            </MapContainer>
        </div>
    </div>
  );
}

I'm using leaflet 1.9.4 and react-leaflet 4.2.1.

Any idea on what's causing the issue?