Pigeon marker onclick not working (React JS)

Question

I'm using the Pigeon map library in React.js I added a marker. I'm trying to add an onClick function for the Marker, but the function doesn't trigger (Nothing appears in the console). I'm new to this library so I apologize if the question doesn't make sense, any help will be appreciated

This is the code:

import "./Map.css";
import { Map, Marker } from "pigeon-maps";

function MapSection() {
  const defaultProps = {
    center: [34.05849001345665, -118.24410152128736],
    zoom: 13,
  };

  return (
    <div className="map-container" style={{ height: "100%", width: "100%" }}>
      <Map
        dprs={[1, 2]}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <Marker
          width={50}
          anchor={[34.0549172229829, -118.25578667187575]}
          onClick={() => console.log("onClick Function")}
        >
          Marker
        </Marker>
      </Map>
    </div>
  );
}

I tried to put a div inside the Marker component and set onClick for the div but it didn't work.

I also changed the 'width' prop, I added onChildClick to the Map component but they didn't work either.

Answer 1

Marker element has a pointer-events:none on it. This doesn't allow the click event to go through. Set the Marker to have style={{pointerEvents:'auto'}} will allow the click events.