MongoDB SDK embeded charts are not being highlighted

Question

I have plotted a graph of humidity vs date and wanted to highlight a subset of the whole graph. The subset begins from a starting date (gte) and ends at the ending date (lte).

Both these dates are to be selected by the user from a drop-down.

I tried the following script code. Expected it to highlight the specified datarange through the mentioned starting and ending dates and dull out rest of the graph. But, it didn't highlight any part just dulled out the graph

I'm not sure what is wrong with the code so i'd like to know what i can change or improve

<script>
    const ChartsEmbedSDK = window.ChartsEmbedSDK;

    const sdk = new ChartsEmbedSDK({
        baseUrl: "https://charts.mongodb.com/charts-project-0-jgwha",
    });

    const chart1 = sdk.createChart({
        chartId: "65380703-4c44-46b6-8082-f62e3a1df728",
        height: "480px",
        width: "640px"
    });

    const chart3 = sdk.createChart({
        chartId: "6538083a-20dc-4697-8d2c-16eb09c71e54",
        height: "480px",
        width: "640px"
    });

    const chart2 = sdk.createChart({
        chartId: "653809ec-9ea5-4ba3-86b9-88efd2fbc2e1",
        height: "480px",
        width: "640px"
    });

    chart1.render(document.getElementById('chart1'));
    chart2.render(document.getElementById('chart2'));
    chart3.render(document.getElementById('chart3'));

    const daySelect1 = document.getElementById("s_day");
    const daySelect2 = document.getElementById("e_day");

    daySelect1.addEventListener("change", async (e) => {
        updateHighlights();
    });

    daySelect2.addEventListener("change", async (e) => {
        updateHighlights();
    });

    function updateHighlights() {
        const selectedDate1 = daySelect1.value;
        const selectedDate2 = daySelect2.value;

        if (selectedDate1 === "" || selectedDate2 === "") {
            chart1.setHighlight({});
            chart2.setHighlight({});
        } else {
            // Parse the date values from daySelect1 and daySelect2
            const startDay = new Date(selectedDate1);
            const endDay = new Date(selectedDate2);

            // Use startDay and endDay in the highlights
            chart1.setHighlight({
                'days.datetime': { $gte: startDay, $lte: endDay }
            });
            chart2.setHighlight({
                'days.datetime': { $gte: startDay, $lte: endDay }
            });
        }
    }
</script>