Layering different heat maps on top of eachother

[lzinga]

I have 3 types of data I need to show on the map in the form of a "heatmap" I can successfully gradient on the colors I want but I want the colors to blend together if they potentially over lap.

I have the following

L.heatLayer(points1, {
    radius: 30,
    blur: 30,
    gradient: { 0.0: 'rgba(84, 160, 255, 0)', 1: 'rgba(84, 160, 255, .5)' }
}).addTo(map);

L.heatLayer(points2, {
    radius: 30,
    blur: 30,
    gradient: { 0.0: 'rgba(238, 82, 83, 0)', 1: 'rgba(238, 82, 83, .5)'}
}).addTo(map);

However when points land in the same area the last one to be drawn just overlaps the first and pretty much hides the one underneath it.

This image is with both being shown.

this one is with just the first one being shown.

In the transparent areas there does seem to be some tint that comes through but it doesn't seem to do what I would expect and instead alter the color to be more of a purple or magenta. Anyone know of a way to add this into it or make this work? Any help would be very much appreciated.

This is like my last step to get my project into a good position so any help is GREATLY appreciated!