Heatmap based on values of points

[fourdasheyes]

I am trying to use the <HeatmapLayer /> from.
However, the documentation is not clear how to use properties, such as heatmapWeight.
I am trying to use it like this

         <Mapbox.HeatmapLayer
          id="world-hexagons"
          sourceID="world-hexagons"
          sourceLayerID="world-hexagons"
          style={{
            heatmapColor: [
              'interpolate',
              ['linear'],
              ['heatmap-density'],
              0,
              'rgba(33,102,172,0)',
              0.2,
              colors.backgroundColor,
              0.4,
              'rgb(209,229,240)',
              0.6,
              'rgb(253,219,199)',
              0.8,
              'rgb(239,138,98)',
              1,
              'rgb(178,24,43)',
            ],
            heatmapWeight: ['value', ['exponential']], // value is the property in my geojson that defines the weight of each point
          }}
        />

This gives me

ERROR Mapbox error inserting layer failed at position default: value must be a number {"level": "error", "message": "inserting layer failed at position default: value must be a number"}

This is the geojson I am feeding it

{"type":"FeatureCollection","features":[{"type":"Feature","id":"8b283428b4e2fff","properties":{"color":"#255203","value":2,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.36961699794992,37.545327944238046],[-122.36946412963322,37.545568615972485],[-122.36964363217035,37.545784178304714],[-122.36997600300637,37.54575906842334],[-122.3701288699159,37.54551839668449],[-122.36994936739666,37.54530283483142],[-122.36961699794992,37.545327944238046]]]}},{"type":"Feature","id":"8b283428b4e3fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.3701288699159,37.54551839668449],[-122.36997600300637,37.54575906842334],[-122.37015550633437,37.54597462919887],[-122.37048787655398,37.54594951775642],[-122.37064074205634,37.54570884601318],[-122.37046123874627,37.54549328571679],[-122.3701288699159,37.54551839668449]]]}},{"type":"Feature","id":"8b283428b4eefff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37064074205634,37.54570884601318],[-122.37048787655398,37.54594951775642],[-122.37066738067281,37.54616507697528],[-122.37099975027604,37.54613996397173],[-122.37115261437113,37.545899292224114],[-122.37097311027028,37.54568373348442],[-122.37064074205634,37.54570884601318]]]}},{"type":"Feature","id":"8b283428b4eafff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37066738067281,37.54616507697528],[-122.37051451459,37.54640574811573],[-122.37069401951763,37.54662130625702],[-122.3710263905101,37.546596192778715],[-122.37117925518565,37.54635552163388],[-122.37099975027604,37.54613996397173],[-122.37066738067281,37.54616507697528]]]}},{"type":"Feature","id":"8b283428b4ebfff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37117925518565,37.54635552163388],[-122.3710263905101,37.546596192778715],[-122.37120589622847,37.54681174936331],[-122.37153826660446,37.5467866343239],[-122.37169112987274,37.5465459631747],[-122.37151162417237,37.54633040706927],[-122.37117925518565,37.54635552163388]]]}},{"type":"Feature","id":"8b283428b4cdfff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37120589622847,37.54681174936331],[-122.37105303097246,37.547052419905334],[-122.37123253749967,37.54726797541231],[-122.37156490926489,37.54724285989815],[-122.37171777311362,37.54700218935176],[-122.37153826660446,37.5467866343239],[-122.37120589622847,37.54681174936331]]]}},{"type":"Feature","id":"8b283428b7b2fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37171777311362,37.54700218935176],[-122.37156490926489,37.54724285989815],[-122.37174441658287,37.547458413848396],[-122.37207678773156,37.54743329677311],[-122.37222965017298,37.54719262622236],[-122.37205014287306,37.546977072751275],[-122.37171777311362,37.54700218935176]]]}},{"type":"Feature","id":"8b283428b7b3fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37222965017298,37.54719262622236],[-122.37207678773156,37.54743329677311],[-122.37225629584027,37.547648849166585],[-122.37258866637237,37.54762373053019],[-122.37274152740643,37.54738305997515],[-122.37256201931584,37.54716750806079],[-122.37222965017298,37.54719262622236]]]}},{"type":"Feature","id":"8b283428b795fff","properties":{"color":"#255203","value":2,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37225629584027,37.547648849166585],[-122.3721034328184,37.54788951911447],[-122.37228294173592,37.5481050704303],[-122.37261531365725,37.5480799513191],[-122.37276817527179,37.5478392813669],[-122.37258866637237,37.54762373053019],[-122.37225629584027,37.547648849166585]]]}},{"type":"Feature","id":"8b283428b782fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37276817527179,37.5478392813669],[-122.37261531365725,37.5480799513191],[-122.37279482336551,37.54829550107813],[-122.37312719467019,37.54827038040586],[-122.37328005487734,37.548029710449335],[-122.37310054518721,37.54781416116942],[-122.37276817527179,37.5478392813669]]]}},{"type":"Feature","id":"8b283428b79cfff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37279482336551,37.54829550107813],[-122.37264196117056,37.548536170427504],[-122.37282147168763,37.54875171910884],[-122.37315384438158,37.54872659796174],[-122.37330670516914,37.54848592860808],[-122.37312719467019,37.54827038040586],[-122.37279482336551,37.54829550107813]]]}},{"type":"Feature","id":"8b283428b79dfff","properties":{"color":"#255203","value":2,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37330670516914,37.54848592860808],[-122.37315384438158,37.54872659796174],[-122.37333335568934,37.54894214508626],[-122.37366572776655,37.54891702237803],[-122.37381858714672,37.54867635302007],[-122.3736390758571,37.54846080637466],[-122.37330670516914,37.54848592860808]]]}},{"type":"Feature","id":"8b283428b799fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.37333335568934,37.54894214508626],[-122.37318049432132,37.54918281383703],[-122.37336000643795,37.54939835988383],[-122.37369237990443,37.54937323670075],[-122.373845239865,37.54913256794571],[-122.37366572776655,37.54891702237803],[-122.37333335568934,37.54894214508626]]]}},{"type":"Feature","id":"8b283428b6a4fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.373845239865,37.54913256794571],[-122.37369237990443,37.54937323670075],[-122.3738718928117,37.54958878119071],[-122.37420426566138,37.549563656446516],[-122.3743571242145,37.54932298768719],[-122.37417761132544,37.54910744367635],[-122.373845239865,37.54913256794571]]]}},{"type":"Feature","id":"8b283428b6a5fff","properties":{"color":"#c20020","value":1,"opacity":1,"outlineColor":"black"},"geometry":{"type":"Polygon","coordinates":[[[-122.3743571242145,37.54932298768719],[-122.37420426566138,37.549563656446516],[-122.37438377935933,37.54977919937961],[-122.37471615159217,37.54975407307428],[-122.3748690087378,37.54951340431069],[-122.3746894950581,37.549297861856715],[-122.3743571242145,37.54932298768719]]]}}]}

As far as I can see value is always a number. Even if I change this to

heatmapWeight: [1, ['exponential']],

I get

ERROR Mapbox error inserting layer failed at position default: value must be a number {"level": "error", "message": "inserting layer failed at position default: value must be a number"}

[fourdasheyes]

style={{
            heatmapWeight: [
              'interpolate',
              ['linear'],
              ['get', 'value'],
              min, // min value of your data
              0,
              max, // max value of your data
              1,
            ],
            heatmapColor: [
              'interpolate',
              ['linear'],
              ['heatmap-density'],
              0,
              'rgba(33,102,172,0)',
              0.2,
              colors.backgroundColor,
              0.4,
              'rgb(209,229,240)',
              0.6,
              'rgb(253,219,199)',
              0.8,
              'rgb(239,138,98)',
              1,
              'rgb(178,24,43)',
            ],
          }}