Get all intersecting features in the overlapping polygons on the clicked coordinate in Leaflet

Question

I'm having trouble getting all intersecting features in the overlapping polygons.

What I want to do is when user clicked on the map it will display all features on the clicked coordinate I already accomplished this but the problem is It will also capture the near polygons even though it is not overlapping to each other.

My current code looks like this:

map = new L.Map('map_div', { center: new L.LatLng(x, y), zoom: 9 });

map.on('click', clickHandler);

function clickHandler(e) {

    var clickBounds = L.latLngBounds(e.latlng, e.latlng);
    var intersectingFeatures = [];
    for (var l in map._layers) {
        var overlay = map._layers[l];
        if (overlay._layers) {
            for (var f in overlay._layers) {
                var feature = overlay._layers[f];
                var bounds;
                if (feature.getBounds) bounds = feature.getBounds();
                else if (feature._latlng) {
                    bounds = L.latLngBounds(feature._latlng, feature._latlng);
                }
                if (bounds && clickBounds.intersects(bounds)) {
                    intersectingFeatures.push(feature);
                }
            }
        }
    }
    var html = intersectingFeatures.map(function (o) {
        try {
            return '<pre>' + JSON.stringify(o.feature.properties, null, ' ').replace(/[\{\}"]/g, '') + '</pre>';
        } catch (err) {
            console.log("no feature found");
            return '';
        }
    }).join('<br />');

    map.openPopup(html, e.latlng, {
        offset: L.point(0, -24)
    });
}

Output: