Модальное окно событий диспетчеризации Livewire с динамическим содержимым

Я пытаюсь показать пользователю время, когда он доступен по дням, и отобразить их в модальном режиме.

public function searchAvailability(){
        $this->validate();
        $doctor = Doctor::where('id',$this->selectedDoctor)->first(); 
        $doctorTimes = DoctorTime::where('doctor_id',$this->selectedDoctor)->get();
        $parsedDate = Carbon::parse($this->selectedDate);

        $dayName = $parsedDate->format('l');
        
        if ($parsedDate->isFuture()) {
            foreach($doctorTimes as $doctorTime){
                if ($doctorTime->day == $dayName) {
                    $this->availableOn = DoctorTime::where('doctor_id',$this->selectedDoctor)
                    ->where('day',$doctorTime->day)->where('is_taken',0)->get();
                }
            }
            if (count($this->availableOn) > 0) {
                $this->dispatch('loading-success',
                title: 'Search Availability',
                );
            }
}


protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];

public function showTimesModal() { 
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);
}

вот я слушаю события:

window.addEventListener('loading-success', (event) =>{ 
    let data = event.detail
    let timerInterval;

    Swal.fire({
        title: data.title,
        timer: 2000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft()}`;
            }, 100);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    })
    .then((result) => {
        if (result.dismiss === Swal.DismissReason.timer) {
            Livewire.dispatch('showModal');
        }
    });
})

protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];`


public function showTimesModal(){         
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);         
}

<div class = "modal fade"  id = "showTimes" tabindex = "-1" aria-labelledby = "showTimes" aria-hidden = "true"> <div class = "modal-dialog modal-dialog-centered"> <div class = "modal-content"> <div class = "modal-header"> ...

@script
    $wire.on('appointment-modal', (availableOn) =\> {
        console.info(availableOn);
        const myModal = new bootstrap.Modal('#showTimes');
        myModal.show();
    });
@endscript

Я пытался зациклить такие данные

availableOn.forEach(time => { 
    let timeElement = document.createElement('p'); 
    timeElement.textContent = time.start_time + ' - ' + time.end_time; 
    modalBody.appendChild(timeElement) 
    const myModal = new bootstrap.Modal('#showTimes'); 
    myModal.show();

но модал исчезает!

В целом, код организует поток поиска доступности, отображает сообщение об успехе и показывает модальное окно с доступным временем, используя Laravel (PHP), JavaScript (с SweetAlert и Livewire) и Bootstrap для стилизации модального окна.