Is it possible to, Click to zoom in and switch to vector layer beneath, on webpage to show GeoServer WMS layers via OpenLayers?

I have 2 vector layers in GeoServer

First is a district layer

Second is a state layer

When I make a Layer group of these layers in the GeoServer and showing that layer group on the web-page, using open layers “get-feature information” function, that shows attributes of both layers on the web-page, but I only want to restrict these features to the district layer only (I don’t want to see the state layer features).

Is it possible to click over to select some state and zoom in to the district layer below, and the state layer doesn’t show after that,
and when I zoom out again, the state layer re-appears?

window.onload = init;

function init(){

    //Geoserver layer 
    // wmsSource = indialayersource

    var indialayersource = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":"agrodss:Rainfall", "tiled": true},
        serverType: "geoserver"
    })

    // wmsLayer = indialayer

    var indialayer = new ol.layer.Tile({
        source: indialayersource, 
        visible:true,
        title: "ForAgrodss"
    })

        // hover

    var highlightStyle = new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255,255,255,0.7)',
      }),
      stroke: new ol.style.Stroke({
        color: '#3399CC',
        width: 3,
      }),
    });



  var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'localhost:8080/geoserver/agrodss/ows?service=wfs&' + 
             'version=2.0.0&request=GetFeature&' +
             'typeName=agrodss:india_boundary_updated_GCS&maxFeatures=500&' + 
             'outputFormat=application%2Fjson' +
             'bbox=' + extent.join(',') + ',EPSG:4326';
    },
    strategy: ol.loadingstrategy.bbox
    });
    
    var vector = new ol.layer.Vector({
       source: vectorSource
    });
    // map.addLayer(vector);

    // view = myview

    var myview = new ol.View({
        center: ol.proj.fromLonLat([80, 22]),
            zoom: 4.5, 
            maxZoom: 8,
            minZoom: 4,
      });

      var map = new ol.Map({
        layers: [vector, indialayer],
        target: 'js-map',
        view: myview,
      });

      var selected = null;
      var status = document.getElementById('status');

      map.on('pointermove', function (e) {
        if (selected !== null) {
          selected.setStyle(undefined);
          selected = null;
        }
      
        map.forEachFeatureAtPixel(e.pixel, function (f) {
          selected = f;
          f.setStyle(highlightStyle);
          return true;
        });
      
        if (selected) {
          status.innerHTML = ' Hovering: ' + selected.get('name');
        } else {
          status.innerHTML = ' ';
        }
      });
      

      map.on('singleclick', function (evt) {
        document.getElementById('info').innerHTML = '';
        var myviewResolution = myview.getResolution();
        var url = indialayersource.getFeatureInfoUrl(
          evt.coordinate,
          myviewResolution,
          'EPSG:3857',
          {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': '5'}
        );
        if (url) {
          fetch(url)
            .then(function (response) { return response.text(); })
            .then(function (html) {
              document.getElementById('info').innerHTML = html;
            });
        }
      });
    
      map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel, function () {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });



    map.on('click', function(e){
        console.log(e.coordinate);


    })
}

I am trying to use Select Features by Hover of OpenLayers to select the state, then go to district layer.
But it ain’t working.