jquery multidatepicker beforeshowday enable a date in a single click

Question

I'm using a Multidatepicker plugin for a calendar event. The plugin is related to the jQuery UI date picker. My goal here is whenever I click on the date that is available, the onSelect event will trigger an ajax call to check the nearest date selected for the unavailable date and enable it in a single click.

For example, from the variable unavailable, these are the unavailable dates. If I selected a date from the calendar 2022-05-06. An ajax call will trigger and returns the nearest unavailable date which is 2022-05-11 and then it will enable the date 2022-05-11.

The problem is on the beforeShowDay event, it needs me to click twice on the date to enable the unavailable date. The first click will just trigger the ajax call and print the date on a hidden input then the next time I click, it will enable the date. I just need to do it in a single click.

let unavailable = ['2022-05-11','2022-05-12','2022-05-13','2022-05-14','2022-05-15','2022-05-16'];

$('#date-picker').multiDatesPicker({
  dateFormat: "dd/mm/yy",
  minDate: new Date(),
  maxPicks: 2,
  altField: '#altField',
  beforeShowDay: function (date) {
      let string = jQuery.datepicker.formatDate('yy-mm-dd', date),
          hiddenDate = $('#nearest-unavailable-date').val(),
          rooms;

      if (hiddenDate) {
          rooms = unavailable.filter(function (elem) {
              return elem !== hiddenDate;
          });

          return [rooms.indexOf(string) === -1]
      } else {
          return [unavailable.indexOf(string) === -1];
      }
  },
  onSelect: function(dateText) {
      $.ajax({
         url: rl_booking_variables.ajax_url,
         method: "POST",
         data: { ... },
         success: function(response) {
             if (response.success) {
                 $('#nearest-unavailable-date').val(response.date)
             }
         }
     })
  }
});

Not really sure what I missed here. Thanks in advance!