My geosearch is not working with leaflet onClick - react-leaflet

Question

I am trying to have search control and onClick event handler to add Marker on my leaflet map. But search control is not working with onClick, but working fine when I don't have any onClick handlers.
class GeoSearch extends MapControl {
createLeafletElement(opts) {
const provider = new OpenStreetMapProvider()
const searchControl = new GeoSearchControl({
provider: provider,
position: 'bottomleft',
style: 'button',
})
return searchControl
}
componentDidMount() {
const {map} = this.props.leaflet
map.addControl(this.leafletElement)
}
}
export default withLeaflet(GeoSearch)
<Map
...
onClick={this.addMarker}
>
<Search />
</Map>

Answer 1

I guess addMarker event is also triggered once control is clicked, right? If so, this is the expected behavior since control elements emit events that are propagated to map. To suppress control events from propagation L.DomEvent.disableClickPropagation method could be utilized, here is a modified version of GeoSearch component:
class GeoSearch extends MapControl {
constructor(props, context) {
super(props);
}
createLeafletElement(opts) {
const provider = new OpenStreetMapProvider();
const searchControl = new GeoSearchControl({
provider: provider,
position: "topleft"
});
return searchControl;
}
componentDidMount() {
const { map } = this.props.leaflet;
map.addControl(this.leafletElement);
//To suppress control events from propagation
const containerDiv = this.leafletElement.getContainer();
L.DomEvent.disableClickPropagation(containerDiv);
}
}
Here is a demo