I'm having an issue where a mouseover event is not working with an SVG path element when using a Leaflet overlay pane. I create 3 SVG elements (using D3.js) - a circle, a rect and a path. They all display fine, and the mouseover events work on the circle and rect, but not the path. If I create the same 3 elements without Leaflet, they all work fine.

Here's the javascript code

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mymap);

//initialize svg to add to map
L.svg({clickable:true}).addTo(mymap)// we have to make the svg layer clickable

const overlay = d3.select(mymap.getPanes().overlayPane)
const svg = overlay.select('svg').attr("pointer-events", "auto")

svg.append('path')
  .attr('d', 'M 110 110 H 190 V 190 H 110 L 110 110')
  .style("fill", "green")
  .attr("stroke", "black")
  .on('mouseover', () => {
      console.log("mouseover path");
      d3.select(event.currentTarget).style("fill", "blue")
  })
  .on('mouseout', () => {
      d3.select(event.currentTarget).style("fill", "green")
  })


svg.append('circle')
  .attr("cx", 300)
  .attr("cy", 200)
  .attr("r", 75)
  .style("fill", "yellow")
  .attr("stroke", "black")
  .on('mouseover', () => {
      console.log("mouseover circle");
      d3.select(event.currentTarget).style("fill", "blue")
  })
  .on('mouseout', () => {
      d3.select(event.currentTarget).style("fill", "yellow")
  })

svg.append('rect')
  .attr("x", 500)
  .attr("y", 200)
  .attr("width", 75)
  .attr("height", 75)
  .style("fill", "red")
  .attr("stroke", "black")
  .on('mouseover', () => {
      console.log("mouseover rect");
      d3.select(event.currentTarget).style("fill", "blue")
  })
  .on('mouseout', () => {
      d3.select(event.currentTarget).style("fill", "red")
  })

Here it is as a JSFiddle

And here's the same code without Leaflet which works as I expect

Can anyone explain why the mouseover event is not working with the path element? Thanks!