Search object by key from json layer made by overpass api

Question

Im building sport facilities map based on leaflet. Im using Overpass API to get object data and make one layergroup for one type sports facilites.

var swimming = new L.LayerGroup();
var swimming_node = new L.layerJSON({
        url: 'http://overpass-api.de/api/interpreter?data=[out:json]    [timeout:1];node({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out body;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['lat','lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

var swimming_way = new L.layerJSON({
    url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];way({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['center.lat','center.lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

    var swimming_relation = new L.layerJSON({
    url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];relation({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['center.lat','center.lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

Next I made a layer contains all my sports facitilies

var allLayers = L.layerGroup([basketball, swimming, tennis, volleyball
]);

After that I tried to add fuse.js[1] and Leaflet.Control.Search [2] to find object by name "tags.name" or type "tags.sport".

Search tool appear but cant find any object. Please tell me what wrong is with my code and if possible how should it looks.

var fuse = new Fuse(allLayers.elements, {
        keys: ['tags.name', 'tags.sport']
    });
    
L.control.search({
        layer: allLayers,
        propertyName: 'name',
        position:'topright',
        filterData: function(text, records) {
            var jsons = fuse.search(text),
                ret = {}, key;
            
            for(var i in jsons) {
                key = jsons[i].elements.name;
                ret[ key ]= records[key];
            }

            console.log(jsons,ret);
            return ret;
        }
    })
    .on('search_locationfound', function(e) {
        e.layer.openPopup();
    })
    .addTo(map);

[1] https://github.com/krisk/fuse

[2] https://opengeo.tech/maps/leaflet-search/examples/fuzzy.html