leafet wfs adding and removing layers when zooming

it would be easier to use wms, there I would just specify maxzoom and minzoom for layers, BUT I need wfs. So these are my layers:

var WFS = new L.WFS({
    url: 'http://localhost:8080/geoserver/wfs',
    typeNS: 'cite',
    typeName: 'gp',
    crs: L.CRS.EPSG4326,
    geometryField: 'lin',
      filter: new L.Filter.BBox('lin', map.getBounds(), L.CRS.EPSG4326),
  style: {
      color: '#0033cc',
      weight: 1,
      stroke: true,
      lineCap: 'round'
    },
  });
var WFS1 = new L.WFS({
    url: 'http://localhost:8080/geoserver/wfs',
    typeNS: 'cite',
    typeName: 'gp1',
    crs: L.CRS.EPSG4326,
    geometryField: 'lin',
      filter: new L.Filter.BBox('lin', map.getBounds(), L.CRS.EPSG4326),
  style: {
      color: '#0033cc',
      weight: 1,
      stroke: true,
      lineCap: 'round'
    },
  });
  var WFS2 = new L.WFS({
    url: 'http://localhost:8080/geoserver/wfs',
    typeNS: 'cite',
    typeName: 'gp2',
    crs: L.CRS.EPSG4326,
    geometryField: 'lin',
      filter: new L.Filter.BBox('lin', map.getBounds(), L.CRS.EPSG4326),
  style: {
      color: '#0033cc',
      weight: 1,
      stroke: true,
      lineCap: 'round'
    },
  });
  

  var layerGroup = L.layerGroup([WFS, WFS1, WFS2]);

This is how I form the id to recognize the layer:

layerGroup.eachLayer(function (layer) {
    console.log(layer);
    layer.feature = {
  id: '',
};
});

And this is the code itself with events:

map.on('zoomend', function(e) {
layerGroup.eachLayer(function (layer) {
console.log(map.hasLayer(layer));

switch (layer.feature.id) {
  case "WFS":
  if (map.getZoom() > 15)
  map.addLayer(layer);
    break;
  case "WFS1":
      if (map.getZoom() > 15)
  map.addLayer(layer);
    break;
  case "WFS2":
     if (map.getZoom() > 15)
  map.addLayer(layer);
    break;
//  default:
   // map.removeLayer(layer); 
}
                                    if (map.getZoom() < 16) {
                                     map.removeLayer(layer); 
                                    } 
                                    //else 
                                    //map.addLayer(layer); 
                                    console.log(layer);
                                    //}
                                    });
                                 });
map.on('overlayadd overlayremove', function(e) {
if (e.type === "overlayadd"){
switch (e.layer.options.typeName) {
  case "gp":
   e.layer.feature = {
  id: 'WFS',
};
    break;
  case "gp1":
      e.layer.feature = {
  id: 'WFS1',
};
    break;
  case "gp2":
     e.layer.feature = {
  id: 'WFS2',
};
    break;
}
if (map.getZoom() < 16) {
    map.removeLayer(e.layer); 
   } else
map.addLayer(e.layer); 
console.log(e.layer);
}else if (e.type === "overlayremove"){
console.log(e.layer);
if (map.getZoom() > 15) {

   e.layer.feature = {
  id: '',
};
  

}

}
console.log(e);
});

What I need? I need layers that are selected in L.Control.layer to be able to be displayed at a certain scale.

What happens in my code as a result? As a result, I click to add a layer to L.Control.layer at a scale of <16, the layer does not turn on and when it reaches >16 it starts to be displayed on the map, but if zoom<16 is done back, then the checkmark in L.Control.layer is removed and when returning to zoom>16 the checkmark appears back and the layer too, but it should have been deleted, or at least the checkmark was not removed