How to make marker appear on the surface of image overlay onclicked in react-leaflet

I am using React leaflet together with together with custom CRS, Leaflet CRS docs

What I want to do is:

1. A custom image is display at the map container as ImageOverlay
2. When user clicked on a position on the Image, a marker will display on top of the ImageOverlay

So the illustration is like this:

Here is my attempt:

The map container

<MapContainer
    center={[250, 500]}
    zoom={0}
    style=
    crs={L.CRS.Simple as CRS}
    maxZoom={2}
    zoomControl={false}
    doubleClickZoom={false}
    scrollWheelZoom={false}
    dragging={false}
    >
    <MapClick />

     {/**This is where I display the marker */}
    {routePoints.map((point, index) => (
    <Marker
        key={index}
        position={point}
        icon={L.icon({
        iconUrl: `${playerMarkerAssest}`,
        iconSize: [35, 35],
        })}
    />
    ))}

    {/**This is the image url */}
    <ImageOverlay url={mapAssest} bounds={imageBounds} />
</MapContainer>

useMapEvents

useMapEvents({
    click: (e) => {
        setRoutePoints([...routePoints, e.latlng]);
    },
  });

In the code above, when user clicked on any position, the LatLngExpression[] will set into any array named RoutePoints

then display the marker according to the routePoints (The point user clicked on)`

Right now, the problem is, When user click on a position only the ImageOverlay, the marker is display at somewhere else. Which will like illustration below:

When user click on the position on top, the marker appeared at the bottom

Please let me know what I missing out, and how to achieve what I want as described above.

Attach a screen recording to describe the question as well https://youtu.be/o5Hh80WjJ80

from How to make marker appear on the surface of image overlay onclicked in react-leaflet