Heatmap Gradient disapears when zooming in

[Jacobus1998]

Im using leaflet.heat in react.

When zooming in on the heatmap the gradient of the heatmap changes to a single colour and does not retain its original colours in the position. For instance when zoomed out there is a orange area on the map but when zooming in it gets to a point where all the heat points become blue. Is there a way to prevent this and keep the area the same colour that it was when zoomed out?

The following is the image of when it is zoomed out.

When starting to zoom in it changes the gradient to the following.

And then finally it reaches a point where everything is blue.

Is there a way to use keep the gradient of the zoomed out map in the zoomed in map?

My current heatmap layer code is as follows:
L.heatLayer(heatmapPoints , { max: max, maxZoom:8 , radius:10 , blur:15, minOpacity: 0.7}).addTo(mapRef);