Using a custom button to start editing with leaflet-geoman is automatically placing a first vertex on the Leaflet map (Next.js, React)

Question

Using Next.js@12 & leaflet-geoman@2.7

I have a custom toolbar with a number of buttons to enable drawing (polygon, rectangle, marker), when I click a button to start drawing, the first vertex is created before I have a chance to move my cursor and click.

Here is the button. I think the click is propagating through to the map underneath the button? Is there a way to stop this? Menu Button is here:

<Menu.Item
     icon={<IconRectangle size={14}/>}
     onClick={() => {
         map.pm.enableDraw('Rectangle', {
         tooltips: false
         })
     }}>
     Rectangle
</Menu.Item>

Answer 1

OK, this works. There's a stopPropagation method on the event object.

<Menu.Item
     icon={<IconRectangle size={14}/>}
     onClick={(e) => {
         e.stopPropagation()
         map.pm.enableDraw('Rectangle', {
         tooltips: false
         })
     }}>
     Rectangle
</Menu.Item>