How can I use maxNativeZoom to continue to show the vector tiles beyond their maximum zoom level?

I have a tile set that is defined for zoom levels 0-2, but I want it to continue to show beyond a zoom level of 2. I believe this is done using maxNativeZoom however this setting doesnt seem to work, as the tiles are hidden beyond a zoom level of 2.

The full code for this problem is:

<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>

    <style>
        body {
            margin: 0;
        }

        #map {
            background: #F9F7F7;
        }
    </style>
</head>

<body>
    <div id='map' style='width: 100vw; height: 100vh'></div>
    <script>
        var map = L.map('map');

        // add openstreetmap basemap
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        const URL = 'https://gfswindtiles.s3.eu-west-2.amazonaws.com/tiles/{z}/{x}/{y}.pbf'
        const interpolator = d3.scaleLinear()
            .domain([0, 4, 12, 16, 20, 24, 28].map(x => x * 1.94384))
            .range(["hsl(0, 0%, 100%)", "hsl(202, 88%, 51%)", "hsl(157, 96%, 53%)", "hsl(60, 100%, 49%)", "hsl(26, 100%, 49%)", "hsl(0, 64%, 43%)", "hsl(274, 47%, 29%)"]);

        const opacityInterpolaotr = d3.scaleLinear()
            .domain([0, 4, 12, 28].map(x => x * 1.94384))
            .range([0, 0, 1, 1]);

        const vectorStyle = {
            wind: function (properties, zoom) {
                var speed = properties.wind_speed_max;
                const color = interpolator(speed);
                const opacity = opacityInterpolaotr(speed);
                return {
                    fill: true,
                    fillColor: color,
                    stroke: false,
                    fillOpacity: opacity
                };
            }
        };

        L.vectorGrid.protobuf(URL, {
            rendererFactory: L.canvas.tile,
            // token: TOKEN,
            vectorTileLayerStyles: vectorStyle,
            maxNativeZoom: 20,
            maxZoom: 2
        }).addTo(map);

        map.setView({
            lat: 0,
            lng: 0
        }, 3);

    </script>
</body>

</html>

Any help would be appreciated!

Leaflet / Leaflet.VectorGrid

How can I use maxNativeZoom to continue to show the vector tiles beyond their maximum zoom level? #283