How to prevent event bubbling on child of React-Leaflet Map

For Leaflet map use L.DomEvent.disableClickPropagation instead which:

Adds stopPropagation to the element's 'click', 'doubleclick', 'mousedown' and 'touchstart' events.

Example

function MyMap() {  return (    <div>      <Map zoom={13} center={[51.505, -0.09]}>        <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />        <MyInfo />      </Map>    </div>  );}

where

function MyInfo() {  const divRef = useRef(null);  useEffect(() => {    L.DomEvent.disableClickPropagation(divRef.current);  });  return (    <div ref={divRef} id="zone">      <p>Double-click or click and drag inside this square</p>      <p>Why does the map zoom/pan?</p>    </div>  );}

Updated codepen

Alternative option

Another option to stop div element from propagation to map events would be to place div outside of the map element:

<div>  <Map zoom={13} center={[51.505, -0.09]}>    <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />  </Map>  <MyInfo /></div>

where

function MyInfo() {  return (    <div id="zone">      <p>Double-click or click and drag inside this square</p>      <p>Why does the map zoom/pan?</p>    </div>  );}