I have an example of a simple flyer heatmap with data from the API. But it doesn't generate a gradient heatmap as it should.

have to think of the gradient indexes (0.0 to 1.0) as a cursor from 0% to 100% of your max intensity

const body = {
                f: "json",
                returnGeometry: true,
                rollbackOnFailure: true,
                geometry: JSON.stringify({
                    xmin: bounds.west,
                    ymin: bounds.south,
                    xmax: bounds.east,
                    ymax: bounds.north,
                    spatialReference: { wkid: 4326 },
                }),
                geometryType: "esriGeometryEnvelope",
            };

And GeoJSOn:

<GeoJSON
                    ref={geoJsonLayer}
                    data={props.data}
                    onEachFeature={onEachState}
                    pointToLayer={heatmapToLayerState}
                />

That pointToLayer={heatmapToLayerState} part of the data:

import L from "leaflet";

const CustomMarker = (latlng) => {
  const iconMarker = new L.Icon({
    gradient: {
      0.2: '#ffffb2',
      0.4: '#fd8d3c',
      0.6: '#fd8d3c',
      0.8: '#f03b20',
      1: '#bd0026'
    }
  });

  return L.marker(latlng, {
    icon: iconMarker,
  });
};

export const heatmapToLayerState = (_, latlng) => {
  return CustomMarker(latlng);
};