HeatmapWithTime is visualized in the back of overlay image

HeatMapWithTime is visualized in the back of the overlay image, even after including <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html.

According to https://github.com/python-visualization/folium/issues/1201, including this <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html should bring the Heatmap to the front. However, that did not work.

My map looks like this:

Basemap

m = folium.Map([35, 41], tiles='stamentoner', zoom_start=6)

Land Use Changes

folium.raster_layers.ImageOverlay(
image=dataimage,
bounds=[[ymin, xmin], [ymax, xmax]],
colormap = lambda x: (x, x, x),
name= 'MODIS Transitions 2009 vs. 2017',
opacity=.8,
zindex=1,
overlay=False,
mercator_project=True).add_to(m)

UCDP HeatMap

hm = HeatMapWithTime(data=list(data.values()), # coordinates
index=list(data.keys()), # years
name = 'UCDP events',
radius=10,
auto_play=False,
max_opacity=1).add_to(m)

folium.LayerControl().add_to(m)
m.save('html/index.html')

My html header is attached:
index.txt

Comienza revisando el index.txt adjunto y reproduciendo el mapa mediante el ejemplo de HeatMapWithTime y ImageOverlay del issue. Rastrea cómo se renderizan y ordenan esas capas en el html guardado y, después, verifica que el heatmap aparezca delante del overlay mientras LayerControl y la configuración existente del mapa siguen funcionando.