React Leaflet Geojson Tooltip. How to disable black borders on click or dragging?

Question

I have problems with the library Leaflet. I have big JSON data, which renders and shows the borders of different districts.

I add a tooltip in my GeoJSon, it shows the name of this district. But when I click or interact(dragging) with this GeoJson element, it shows a black border around them. Look pls at the photo.

<MapContainer
        key={key}
        zoomControl={false}
        dragging={true}
        center={mapCenter}
        zoom={mapZoom}
        scrollWheelZoom={true}
        style={{ height: "100%", flex: 1 }}
      >
        <TileLayer
          minZoom={4}
          maxZoom={9}
          attribution=""
          url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

data.map((subRegion) => (
              <GeoJSON
                style={{
                  color: "transparent",
                  fillColor: "#228B22",
                }}
                eventHandlers={{
                  mouseover: function () {
                    this.setStyle({
                      color: "#0fa80f",
                      opacity: 1,
                    });
                  },
                  mouseout: function () {
                    this.setStyle({
                      opacity: 0,
                    });
                  },
                  click: function (el) {
                    setSubRegion(subRegion.name);
                    handleChangeMap(el);
                  },
                }}
                key={subRegion.properties.NAME_1}
                data={subRegion.geometry}
              >
                <Tooltip sticky>
                  {subRegion.name}
                </Tooltip>
              </GeoJSON>
            ))

</MapContainer>

Answer 1

Leaflet provides outline style in css while focus (dragging or click) , you just need to implement this on your code:

 g:focus {
  outline: none;
}

path:focus {
  outline: none;
}

Answer 2

use this css code

path.leaflet-interactive{
  outline: none;
}

Answer 3

The contributing factor here is the Tooltip element. If you use Popup you won't have this issue. A solve would be the css written above ^^ or remove/replace Tooltip