Leaflet MarkerCluster with GeoJson in MVC

I'm currently working on a Project where I'm using data I pulled from PostgreSQL as data input. Since the json contains a lot of objects, I want to use the MarkerCluster plugin I got from Mappbox:

<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

Displaying the json-layer without the clustering works just fine, but if i try to assign it to the cluster nothing is displayed.

    var map = L.map('map').setView([37.93569, 32.49118], 13);
    var openStreet = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    var konteyner = L.geoJson(null, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: L.icon({
                    iconUrl: "Images/trash2.png",
                    iconSize: [12, 14],
                    iconAnchor: [12, 28],
                    popupAnchor: [0, -25]
                }),
                title: feature.properties.Name,
                riseOnHover: true
            }); 
        },
        onEachFeature: function (feature, layer) {   
            if (feature.properties) {
                var content = "<table class='table table-striped table-bordered table-condensed'>" +
                    "<tr><th>Konteyner No</th><td>" + feature.properties.Name + "</td></tr>" +
                    "<tr><th>Cihaz No</th><td>" + feature.properties.Telephone + "</td></tr>" +
                    "<tr><th>Doluluk</th><td>" + feature.properties.Address + "</td></tr>" +
                    "<tr><th>Kapasite</th><td><a href='" + feature.properties.Url + "' target='_blank'>" + feature.properties.Url + "</a></td></tr>" +
                    "<table>";
                layer.bindPopup(content, {
                    maxWidth: "auto",
                    closeButton: false
                });
                aktifKonteynerSearch.push({
                    value: layer.feature.properties.Name,
                    tokens: [layer.feature.properties.Name],
                    layer: "KonteynerAktif",
                    id: L.stamp(layer),
                    lat: layer.feature.geometry.coordinates[1],
                    lng: layer.feature.geometry.coordinates[0]
                });                   
            }                
        }
    });       

    $.getJSON("home/GetKonteyner", function (data) {
        konteyner.addData(data);
        konteynerturu = 'T';
    }); 

    var markers = L.MarkerClusterGroup();

    konteyner.on('data:loaded', function () {
        markers.addLayer(konteyner);
        map.addLayer(markers);
    });     
    
    var baseLayers = {           
        "OpenStreetMap": openStreet                      
    };

    var overlays = {
        "<img src='Images/trash2.png' width='12' height='14'>&nbsp;Aktif Konteyner": konteyner,
        "<img src='Images/trash3.png' width='12' height='14'>&nbsp;Pasif Konteyner": konteynerpasif
    };
    
    var layerControl = L.control.layers(baseLayers, overlays).addTo(map);       

What am I doing wrong?