Display Features based on Zoom Level using OpenLayers

Question

I want to display roads(linestring) on the map using OpenLayers.currently, I manage to assign styling based on road type but when I run the server I can see all the data displayed. I want to change the way it displays feature. for e.g.

• CATA roads(orange color) should display above zoom level 12,
• CATB roads(yellow color) should display above zoom level 14 but at the same time, it should also display CATA roads.
• Other roads should display above 16 but it should also show CATA and CATB roads along with it. In the current code, I am creating a function to find the road category and assigning style to each category.

I tried to incorporate zoom level and minZoom in my code but I am not able to make it work. It doesn't change anything the way it displays.

code

var styleRoadFunction = function(feature,resolution) {
      var zoom = map.getView().getResolution();
      var road_categ = feature.get("road_categ");
      //var zoom = map.getView().getZoomForResolution();
      console.log(feature);

        var color;           
        var style;
        var text;
        var minZoom;
        
        //if (zoom >=12){
        if (road_categ == 'CATA' && zoom>=11.9999 ){   
             
          style = [
            //for outer color
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#F6B25C',
              width: 10,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:1,
              //minZoom: 12,
            })
          }),
          //for inner color
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#F6B35C',
              width: 7,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:1,
              //minZoom: 11.9999,
            })
          }),         
        ]
       }               
        else if (road_categ == 'CATB' && zoom>=13.9999){
          
          style = [
              //for outer color
            new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#DED5B5',
                width: 9,
                lineCap: 'butt',
                lineJoin:'round',
                zIndex:1,
                //minZoom: 12.9999,
              })
            }),
            //for inner color
            new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#F9E7A1',
                width: 7,
                lineCap: 'butt',
                lineJoin:'round',
                zIndex:1,
                //minZoom: 12.9999,
              })
            }),           
          ]
        }
        else         
          style = [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#c4c2be',
              width: 7,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:0,              
            })
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ffffff',
              width: 5,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:0,             
              
            })
          }),
                 
          return style;  
         };
  var vectorLayer6 = new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
        
            format: new ol.format.MVT(),
            url: 'http://localhost:8081/tiles/roads/{z}/{x}/{y}.mvt'
        }),
        
        style:styleRoadFunction 
       })