Fullcalendar v6 selectMirror custom placeholder with button, event click not working

Question

i am trying to make reschedule button in fullcalendar,

i use selectMirror and custom placeholder like this

I want if I press the yes button it will trigger another event

this my code

function initializeCalendarReschedule(businessHours) {
  calendarReschedule = new Calendar(calendarRescheduleEl, {
    plugins: [dayGridPlugin, timeGridPlugin, interaction],
    initialView: 'timeGridWeek', 
    themeSystem: 'bootstrap5',
    locale: 'id',
    selectMirror: true,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    },
    slotDuration: '00:15:00',
    slotLabelInterval: '01:00:00',
    slotMinTime: "{{ config('open_time') }}",
    slotMaxTime: "{{ config('close_time') }}",
        slotLabelFormat: { hour: '2-digit', minute: '2-digit' },
        events: {
          url: "{{ route('fo.reservation.getEvent') }}",
          method: 'GET',
          extraParams: function() {
            return {
          id_user: id_user,
        };
      }
    },
    contentHeight:"auto",
    allDaySlot: false,
    selectable: true,
    selectOverlap: false,
    businessHours: businessHours,
    eventContent: function(arg) {
      if (arg.event.title == '') {
        var customHtml =  '<div style="text-align: center;">Reschedule Here?</div>' +
                          '<div style="text-align: center;"><button class="btn btn-success border border-white btn-confirm-reschedule">Yes</button></div>';
        return { html: customHtml };
      }
      return true // render default content
    },
  });
  calendarReschedule.render();
}

$(document).on('click', '.btn-confirm-reschedule', function () {
  alert("click");
});

I have also tried including onClick directly in the custom html

but when i click it nothing happens and the placeholder immediately disappears

how to make the button work?