Retriving values to mapbox color values from nested geoJSON object

Question

I am building a app with mapbox, and the backend will return a GeoJSON like this:

{
            "type": "Feature",
            "properties": {
                "heatmap": {
                    "argValue": 3.119083813173218,
                    "zoneLabel": "demo",
                    "metricAvg": 2.589442015839714,
                    "difference": 0.5296417973335039
                }
            },
            "id": "abcedd
        },

geometry was skipped, but when i tried to add stops to the color with the following code:

const heatmapLayer:FillLayer = {
  id: 'heatmap',
  maxzoom: MAX_ZOOM_LEVEL,
  type: 'fill',
  paint: {
    'fill-color': [
      'interpolate',
      ['linear'],
      ['get', 'heatmap',['get','argValue']],
      3.0, 'rgba(33,102,172,0)',
      3.1, 'rgb(103,169,207)',
      3.2, 'rgb(253,219,199)',
      3.3, 'rgb(253,219,199)'
    ],
    'fill-opacity': 0.4,
    'fill-antialias': true
  }
};

However it only render the color black instead of other colors, is there anything I've done wrong?

It didnt work.