what I want is to show a modal alert mode when the patient has allergies and I am handling events
the error that I get

Mi modal

<div>
    <div class="modal fade" wire:ignore.self id="allergieAlertModal" tabindex="-1" aria-labelledby="md-add-fileLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="md-add-fileLabel">{{ __('Allergies') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('openAllergieAlertModal', function() {
                try {
                    var allergieAlertModal = new bootstrap.Modal(document.getElementById(
                        'allergieAlertModal'), {
                        keyboard: false
                    });
                    allergieAlertModal.show();
                } catch (error) {
                    console.error('Error opening allergieAlertModal:', error);
                }
            });
        });
    </script>
@endpush

the class my modal

<?php

namespace AppHttpLivewireMedicalsClinicalHistoriesComponents;

use LivewireComponent;

class AllergiesAlertModal extends Component
{
    protected $listeners = ['medicals.clinical-histories.components.alert' => 'openAllergiesAlert'];

    public function openAllergiesAlert()
    {
/*aqui mando un evento al frontend y lo escucho en mi modal*/
        $this->dispatchBrowserEvent('openAllergieAlertModal');
    }

    public function render()
    {
        return view('livewire.medicals.clinical-histories.components.allergies-alert-modal');
    }
}

I am working with Laravel and Livewire using nested components.

public function mount($patientId)
    {
        $this->updateView = false;

        $this->patient = Client::query()
            ->with('patientData')
            ->find($patientId);

        if (!$this->patient) {
            redirect()->route('medicals.patients.index');
        }

        if ($this->patient->patientData->allergies) {
            $this->emit('medicals.clinical-histories.components.alert');
        }
    }

    public function render()
    {
        return view('livewire.medicals.clinical-histories.master');
    }
}

The master class is the parent component that contains my modal

<div>
    @livewire('shared.toolbar', [
        'title' => __('Patients'),
        'tags' => config('components.toolbar.medicals.patients.personalHistories.list.tags'),
    ])

    <div class="row mt-2">
        <div class="col-12">
            <div class="card" style="border-radius:15px">
                <div class="card-body">
                    @livewire('medicals.clinical-histories.components.patient-data', ['patient' => $patient])
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card h-15" style="border-radius:15px">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.vital-signs', ['patient' => $patient, 'historyId' => $historyId])
                        </div>
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.personal-history', ['patient' => $patient])
                        </div>
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.allergies', ['patient' => $patient])
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
                    @if ($updateView)
                        @livewire('medicals.clinical-histories.components.evolution-notes-edit', ['patient' => $patient])
                    @else
                        @livewire('medicals.clinical-histories.components.evolution-notes', ['patient' => $patient])
                    @endif
                </div>
                <div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
                    @livewire('medicals.clinical-histories.components.clinical-histories', ['patient' => $patient])
                </div>
            </div>
        </div>
        @livewire('medicals.clinical-histories.prescriptions.components.prescription-modal', ['patient' => $patient])
    </div>
    @livewire('medicals.clinical-histories.components.cie10-modal')
    @livewire('medicals.clinical-histories.components.allergies-alert-modal')
</div>

the error I want to solve
use a dd (in case you get into the allergy condition);