How to .BringToBack() cluster group to enable mouse events on the elements currently below markers

[nakigoe]

I create successfully marker cluster but cannot use .BringToBack() to enable mouse events on the elements below

var markers = new L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    return L.divIcon({ html: '<div class="clusterdiv"><b><span class="number">' + cluster.getChildCount() + '</span></b></div>' });
    },
  singleMarkerMode: true,
  zoomToBoundsOnClick: false,
  polygonOptions: {
    weight: 0.67,
    color: 'black',
    fillOpacity: 0.21
  }
})
json.features.forEach(function(feature) {
  markers.addLayer(L.marker([feature.geometry.coordinates[1],feature.geometry.coordinates[0]]));
})
map.addLayer(markers);
markers.bringToBack();

I am trying to add cirlces instead of markers to be able to use .BringToBack(), but the whole app breaks (standard geoJSON)

json.features.forEach(function(feature) {
  markers.addLayer(L.Circle([feature.geometry.coordinates[1],feature.geometry.coordinates[0]], {
    radius: 10*cluster.getChildCount()
  }));

What would be the appropriate code to be able to use BringToBack() or to enable mouse events on elements currently below the custom (CSS only) cluster icon?