Intensity Colours seem random?

[FrankieDuck]

Hello,
For some reason when I pass my data to the heatmap layer it renders the position fine and assigns a colour to them, however it seems completely random. A point with an intensity of 0.44 will have the same gradient colour as one of 0.88. I've checked the functionality in the intensityExtractor and this is working correctly.

any ideas?

import { LayersControl } from 'react-leaflet'
import { HeatmapLayerFactory } from '@vgrid/react-leaflet-heatmap-layer'

const HeatmapLayer = HeatmapLayerFactory<[number, number, number]>()

function Heatmap({ heatmapCords }) {
  const extractedData = heatmapCords?.map((data) => {
    const lat = data[0][0]
    const lng = data[0][1]
    const str = data[0][2]
    console.log(str)
    return { lat, lng, str }
  })

  return (
    <div>
      <LayersControl.Overlay name='Heatmap' checked>
        <HeatmapLayer
          fitBoundsOnLoad
          fitBoundsOnUpdate
          points={extractedData}
          longitudeExtractor={(m) => m.lng}
          latitudeExtractor={(m) => m.lat}
          intensityExtractor={(m) => m.str}
          max={3}
          radius={15}
          blur={5}
          minOpacity={0.1}
          maxZoom={6}
          gradient={{
            0.0: '#00008B',
            0.1: '#191970',
            0.2: '#4169E1',
            0.3: '#6495ED',
            0.4: '#87CEEB',
            0.5: '#ADD8E6',
            0.6: '#F08080',
            0.7: '#CD5C5C',
            0.8: '#8B0000',
            0.9: '#800000',
            1.0: '#660000',
          }}
        />
      </LayersControl.Overlay>
    </div>
  )
}