Flatpickr - disable dates for accommodation availability (almost have it)

Question

Im currently building a bookings management software using Django, Alpine.js, HTMX and for the datepicker I chose Flatpickr because it seems to work hand in hand with Alpine.

Ive managed to pass availability to the flatpickr calendar using dates categorized by where they sit in each block of dates as such:

categorizedDates: {
    start: [],
    middle: [],
    end: [],
  },

with this Im able to manipulate flatpickr to display a calendar with availability like this:

Besides adding the categorized dates I have taken from them only the middle dates like this:

this.unavailableDates = data.categorized_dates.middle;

and added to the unavailable dates that I then disable:

this.flatpickrInstance.set('disable', this.unavailableDates);

So far everything works well, except for single night bookings where there isnt really a middle day to make unavailable. As the picture shows theres a 1 night booking from the 15feb to 16feb, and visually it seems unavailable, but the user can still select a range that includes these dates on the calendar.

My backend logic wont allow user to actually create the booking, and will return an error message, but I what I want is for this not to be possible.

Ive also tried adding the middle class together with the start class for single night bookings and this works in the way that the 15feb is disabled, but no longer acts like a start day that can be selected as a departure day.

Ideally I would have some frontend logic that prevents user from extending a range past a start day but still allow the range to end on it.

I hope this make some sense, I am happy to provide more info if needed.