Flyer - cannot change radius on circle sign when scaling

I am using Leaflet to render point data and I am trying to change the radius of the circle to match the zoom level.

The more the user is zoomed in , the more the more .

Available work is available.

Here's what I have so far.

The first line sets the starting radius:

var damsRadius = 2;

      

        
        
        
      

    

Then I have a scale event to get the zoom level and then use that scale to define a new radius:

map.on('zoomend', function(e) {
    var currentZoom = map.getZoom();
    console.log("Current Zoom" + " " + currentZoom);
    if (currentZoom <= 6) {
        damsRadius = 2;
    } else {
        damsRadius = 6;
    }
    console.log("Dams Radius" + " " + damsRadius);
});

      

        
        
        
      

    

I am setting the radius as part of the style object:

function damsStyle(feature) {
    return {
      fillOpacity: 0.8,
      fillColor: getColor(feature.properties.mainuse),
      weight: 1,
      opacity: 1,
      color: '#e0e0e0',
      radius: damsRadius // HERE IS WHERE I SET THE RADIUS
    };
}

      

        
        
        
      

    

and then add the whole kit to the map using the pointToLayer

following:

pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, damsStyle(feature));
} 

      

        
        
        
      

    

Everything works smoothly depending on the console. Zooming in and out indicates that the value for damsRadius

changes as expected.

The problem is that the radius of the points on the map does not change. So, somewhere along the way, something is not communicated.

I tried the same trick with L.circle

but it didn't work either. Do I need to use a function clearLayers

and redraw every time I change the zoom level?

It seems a little over the top.

Advice