How to use Leaflet Terminator together with the Heatmap

Question

I have a code where, upon running the Leaflet terminator, the heatmap disappears, but the terminator runs successfully. However, when I remove the terminator, the heatmap appears. Below is my code snippet:

<script src=" https://unpkg.com/@joergdietrich/[email protected]/L.Terminator.js"></script>
<script>
function runMap() {
        map = new L.map('map', {

            maxZoom: 10,
            minZoom: 0.1,
            attributionControl: false, //This is to hide the leaflet label at the bottom right of the map

        });
        // L.tileLayer('<?= $map_url ?>').addTo(map);
        // L.terminator().addTo(map);
        var screen_height = $(window).height();
        var initial_zoomLevel = 3;
        if (screen_height <= 768) {
            initial_zoomLevel = 2;
        }

        if (default_zoom_level > 0) {
            initial_zoomLevel = default_zoom_level;
        }

        map.setView(new L.LatLng(15, 0), initial_zoomLevel);

        // add logo to watermark bottom left
        L.Control.Watermark = L.Control.extend({
            onAdd: function(map) {
                var img = L.DomUtil.create('img');
                img.src = '<?= $cloud_icon ?>';
                //                img.style.width = '100px';
                img.style.margin = '0 0 18px 18px';
                return img;
            },
            onRemove: function(map) {
                // Nothing to do here
            }
        });

        L.control.watermark = function(opts) {
            return new L.Control.Watermark(opts);
        }

        L.control.watermark({
            position: 'bottomleft'
        }).addTo(map);

     
        generateMapHeatData();

        //add heatmap layer to map
        var cfg = {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            // if scaleRadius is false it will be the constant radius used in pixels
            "radius": 5,
            "maxOpacity": .5,
            "minOpacity": .02,
            blur: .75,
            gradient: {
                // enter n keys between 0 and 1 here
                // for gradient color customization
                '.35': '#00e500',
                '.40': '#00e500',
                '.50': '#00e500'
            },
            // scales the radius based on map zoom
            "scaleRadius": true,
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": false,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
        };
        // heatmap
        var heatmapLayer = new HeatmapOverlay(cfg);
        heatmap_layer = heatmapLayer.addTo(map);
        heatmapLayer.setData(mapHeatData);
        // add markers layer to map
        markers_layer = L.layerGroup().addTo(map);
        markers_event_layer = L.layerGroup().addTo(map);
        machine_markers_layer = L.layerGroup().addTo(map);
        machine_idle_layer = L.layerGroup().addTo(map);
        machine_down_layer = L.layerGroup().addTo(map);
        machine_sale_layer = L.layerGroup().addTo(map);

        // echart
        overlay = new L.echartsLayer3(map, echarts);
        chartsContainer = overlay.getEchartsContainer();
        overlay.initECharts(chartsContainer);
   
    }

   function generateMapHeatData() {
        var heatmap_data = [];
        for (var key in machine_coordinate_list) {
            var unique_id = key;
            var coordinate_data = machine_coordinate_list[key];

            var heat_item = {
                lat: coordinate_data.location_coordinate_lat,
                lng: coordinate_data.location_coordinate_lng,
                count: 1
            }
            heatmap_data.push(heat_item);
        }
        mapHeatData["max"] = 35;
        mapHeatData["data"] = heatmap_data;
    }
</script>

I tried placing the terminator before generating the heatmap data, but only the terminator appeared. Conversely, if I execute the terminator after the heatmap data, only the heatmap data is displayed, and the terminator does not execute. Now, I want both the heatmap data and terminator to be shown together on the map