Mapbox gl surface from point data

Question

I am building a web app using node and mapbox gl. I have used https://github.com/Rylern/InterpolateHeatmapLayer to generate a colour coded surface which works well to visualise the various results. However I cannot upgrade mapbox to 3.2 as this breaks the my code. I am looking for another way to achieve the same outcome - this feels like it's almost there, but I just can't get it right or find examples online where someone has used point data values to generate a color coded surface using IDW or kringin.

Any help would be greatly appreciated.

I can generate interpolated point data, but cannot seem to figure out how to visualise it using a map layer

//geo located result data
var data = [
    {
        "lat": -38.45576465961828,
        "lon": 176.47416180498288,
        "val": "38.00"
    },
    {
        "lat": -38.45576424792421,
        "lon": 176.47265031561568,
        "val": "57.00"
    },
    {
        "lat": -38.45576206099468,
        "lon": 176.47102467139194,
        "val": "58.00"
    }... ]

var geojson = {
                type: 'FeatureCollection',
                features: data.map(function (item) {
                    return {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [item.lon, item.lat]
                        },
                        properties: {
                            value: parseFloat(item.val), // Parse value as float
                            generateId: true
                        }
                    };
                })
            };
            

            var featureCollection = turf.featureCollection(geojson.features);
//interpolate to create more data points
            var grid = turf.interpolate(featureCollection,0.01, { gridType: 'point', property: 'value', units: 'kilometers', weight:2.5 });
            let minValue = grid.features[0].properties.value;
            let maxValue = grid.features[0].properties.value;

            // Loop through the features to find the actual min and max values
            grid.features.forEach(function(feature) {
                let value = feature.properties.value;
                minValue = Math.min(minValue, value);
                maxValue = Math.max(maxValue, value);
            });

            // Convert interpolated grid to GeoJSON
            var interpolatedSurface = {
                type: 'FeatureCollection',
                features: grid.features.map(function(feature) {
                    return {
                        type: 'Feature',
                        geometry: feature.geometry,
                        properties: {
                            value: feature.properties.value
                        }
                    };
                })
            };

            // Add the interpolated surface as a 3D fill-extrusion layer to the map
            map.addSource('interpolated-surface', {
                type: 'geojson',
                data: interpolatedSurface
            });

            map.addLayer({
                id: 'interpolated-surface-layer',
                type: 'fill-extrusion',
                source: 'interpolated-surface',
                paint: {
                    'fill-extrusion-color': {
                        property: 'value',
                        stops: [
                            [minValue, 'blue'],
                            [maxValue, 'red']
                        ]
                    },
                    'fill-extrusion-height': ['get', 'value'],
                    'fill-extrusion-base': 0,
                    'fill-extrusion-opacity': 0.7
                }
            });

            // Zoom to the bounds of the GeoJSON data
            var bounds = turf.bbox(grid);
            map.fitBounds(bounds, { padding: 50 });

        });