Adding Tooltip to map causes Black Bounding Box to appear on clicking any feature that has tooltip attached to it

[dsonigladiator]

Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [ +] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [+ ] Using the latest version of React and ReactDOM v18.
• [+ ] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [ +] Using the latest v4 version of React-Leaflet.
• [ +] The issue has not already been reported.
• [+ ] Make sure you have followed the quick start guide for Leaflet.
• [+ ] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I am using sticky tooltip in React Leaflet to show the name of the feature on which the mouse is being hovered. There should only be a sticky tooltip added, no other extra functionality should be added

Actual behavior

What happens is that the sticky tooltip gets added, but along with it something else gets triggered which I can't figure out. What happens is that after adding tooltip to my map, when I click a feature, a black bounding box that contains the clicked feature appears out of nowhere and stays on the screen. This is unexpected behavior. This only happens when I add the tooltip, if I remove the tooltip it goes away.

Steps to reproduce

// add tooltip to each feature
  const onEachFeature = (feature, layer) => {

    // disable black bounding box on click
    layer.on("click", function () {
      this._path.setAttribute("style", "outline: none");
    });
    // define tooltip content
    const tooltipContent = `
      <div class="tooltip-container">
        <h1 class="tooltip-title">${feature.properties.shapeName}</h1>
        <h4 class="tooltip-subtitle">${feature.properties.shapeISO}</h4>
      </div>
    `;

    layer.bindTooltip(tooltipContent, {
      sticky: true,
      className: 'custom-tooltip-class'
    });
  };



...
// Inside the MapContainer component

<GeoJSON data={geojson} onEachFeature={onEachFeature} style={geoJsonStyle} />

The issue is most likely related to the tooltip.