Flatpickr is highlighting the day after

I have a club trial session with date: 06/11/2024
but the calendar is highlighting the day after: 07/11/2024

The javascript code:

document.addEventListener('DOMContentLoaded', function() {
    // Pass session dates directly from Laravel to JavaScript
    const sessionSchedules = @json($sessionSchedules);
    console.log("Session Schedules:", sessionSchedules); // Log session schedules to inspect data

    // Initialize Flatpickr with session dates highlighted in green
    flatpickr("#session-date-input", {
        dateFormat: "Y-m-d",
        minDate: "today", // Ensures user cannot pick past dates
        disable: [
            date => !sessionSchedules.some(schedule =>
                // Check if the date is in sessionSchedules
                schedule.day === date.toISOString().split('T')[0] // Ensure proper date comparison
            )
        ],
        onDayCreate: function(dObj, dStr, fp, dayElem) {
            const dateStr = dayElem.dateObj.toISOString().split('T')[0]; // Format the date as YYYY-MM-DD
            console.log("The day being checked: ", dateStr); // Log the date being checked

            let isColored = false; // Track if the day has already been colored

            // Check each session schedule for a match
            sessionSchedules.forEach(schedule => {
                console.log("Checking against schedule day: ", schedule.day); // Log schedule days for debugging
                // Ensure both dates are in the same format before comparison
                if (schedule.day === dateStr && !isColored) {
                    dayElem.style.backgroundColor = "lightgreen"; // Highlight the matching day
                    dayElem.style.color = "black";
                    console.log("Colored Day Element: ", dayElem); // Log the day element being colored
                    console.log("Matched with Schedule Day: ", schedule.day); // Log the matched schedule day

                    isColored = true; // Set flag to prevent further coloring
                    return; // Exit the forEach loop after coloring the matched day
                }
            });
        },
        onChange: function(selectedDates) {
            const sessionSelect = document.getElementById("session-schedule-select");
            sessionSelect.innerHTML = '<option selected disabled>{{ __('frontpages.trialSession.session_date') }}</option>';

            if (selectedDates.length > 0) {
                const selectedDate = selectedDates[0].toISOString().split('T')[0]; // Get selected date in YYYY-MM-DD

                // Filter schedules based on the selected date
                sessionSchedules.forEach(schedule => {
                    if (schedule.day === selectedDate) {
                        const option = document.createElement("option");
                        option.value = schedule.id;
                        option.textContent = `${schedule.day} / ${schedule.start_at} / {{ __('frontpages.trialSession.duration') }} ${schedule.duration} {{ __('frontpages.trialSession.minute') }}`;
                        option.dataset.day = schedule.day;
                        option.dataset.time = schedule.start_at;
                        sessionSelect.appendChild(option);
                    }
                });
            }
        }
    });
});

I get in the console:
Checking against schedule day: 2024-11-06
trialsession:282 Colored Day Element: <span class=​”flatpickr-day” aria-label=​”November 7, 2024″ tabindex=​”-1″ style=​”background-color:​ lightgreen;​ color:​ black;​”>​7​​
trialsession:283 Matched with Schedule Day: 2024-11-06
trialsession:271 The day being checked: 2024-11-07

So how the November 7, 2024 is matched with 06/11/2024!!

I tried to check the date from database which is 06/11/2024 but it matched with November 7, 2024