Dispatch modal window after creating reservation

Hello everyone! I have got questino about not working verification modal window. I am ttrying to do that, immediately after submitin reservation form, there will shows up modal window with input fiild for confirmation code, but it still doesnt work, iam beginner in that and its still my first project. I am trying this forum, if anyone can help me with that.

This is mi booking component where i store funcionality for booking blade

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Reservation;
use App\Mail\ReservationMail;
use Illuminate\Support\Facades\Mail;
use App\Models\AvailableBusinessHour;
use App\Events\ShowVerificationModal;

class Booking extends Component
{
    public $full_name;
    public $email;
    public $phone_number;
    public $reservation;

    public $selectedService;
    public $available_business_hour_id;
    public $selectedBusinessHourId;
    public $verification_code;
    public $successMessage;
    public $successMessageVisible;
    public $successMessageTimeout = 3000;
    protected $listeners = ['showVerificationModal' => 'openVerificationModal'];


    public function render()
    {
        $this->available_business_hour_id = AvailableBusinessHour::whereDoesntHave('reservation')->orderBy('day')->orderBy('from')->get();
        return view('livewire.booking', [
            'emptyOption' => 'Vyber si čas rezervace',
        ]);
    }

    public function store()
{
    $this->validate([
        'full_name' => 'required|string|max:250',
        'email' => 'required|email|max:250',
        'phone_number' => 'required|phone:CZ',
        'selectedService' => 'required',
        'available_business_hour_id' => 'required|unique:reservations',
    ], [
        'available_business_hour_id.unique' => 'Tento termín byl již obsazen, vyber jiný pokud je nějaký dostupný.',
        'available_business_hour_id.required' => 'Výběr času objednání je povinné pole.',
        'phone_number.phone' => 'Chybný formát telefonního čísla.',
        'selectedService.required' => 'Toto je povinné pole',
    ]);

    $selectedBusinessHour = AvailableBusinessHour::find($this->selectedBusinessHourId);

    $verification_code = rand(100000, 999999);

    $reservation = Reservation::create([
        'full_name' => $this->full_name,
        'email' => $this->email,
        'phone_number' => $this->phone_number,
        'service' => $this->selectedService,
        'available_business_hour_id' => $this->selectedBusinessHourId,
        'day' => $selectedBusinessHour['day'],
        'from' => $selectedBusinessHour['from'],
        'to' => $selectedBusinessHour['to'],
        'verification_code' => $verification_code
    ]);

    $this->sendReservationConfirmationMail($reservation);


    $this->successMessage = 'Rezervace proběhla úspěšně.';
    $this->successMessageVisible = true;
    event(new ShowVerificationModal($reservation));
$this->dispatch('showVerificationModal');


    $this->reset(['full_name', 'email', 'phone_number', 'available_business_hour_id']);
}

    public function sendReservationConfirmationMail($reservation)
    {
        Mail::to($reservation->email)->send(new ReservationMail($reservation));
    }

    public function services()
    {
        return ["Stříhání vlasů", "Stříhání + úprava vousů", "Barvení vousů", "Junior střih", "Úprava vousů"];
    }

    public function openVerificationModal()
{
    $this->dispatch('showVerificationModal');
}

    public function confirmReservation()
    {
        $user_entered_code = $this->verification_code;

        $reservation = Reservation::where('verification_code', $user_entered_code)->first();

        if ($reservation) {
            $reservation->update(['is_confirmed' => true]);


        } else {
            $this->addError('verification_code', 'Neplatný verifikační kód.');
        }
    }
}

This is blade

<section id="booking">
    <div class="container">
        @if ($successMessageVisible)
            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, {{ $successMessageTimeout }})" x-show="show" class="alert alert-success">
                {{ $successMessage }}
            </div>
        @endif
        <form wire:submit.prevent="store">
            @csrf
            <div class="col-12 mb-4">
                <h1 class="modal-title fs-5 text-center" id="bookingModalLabel">Objednej se</h1>
                <p class="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum
                    dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="form-group col-12">
                <input type="text" wire:model="full_name" id="full_name" name="full_name" class="form-control"
                    placeholder="Celé jméno*" required>
            </div>
            <div class="form-group col-12">
                <input type="email" wire:model="email" id="email" name="email" class="form-control"
                    placeholder="Email*" required>
            </div>
            <div class="form-group col-12">
                <input type="text" wire:model="phone_number" id="phone_number" name="phone_number"
                    class="form-control" placeholder="Tel. číslo ve formátu +420700700700" required>
                @error('phone_number')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            <div class="form-group col-12">
                <select wire:model="selectedService" class="form-control">
                    <option value="">Vyberte službu</option>
                    @foreach ($this->services() as $service)
                        <option value="{{ $service }}">{{ $service }}</option>
                    @endforeach
                </select>
                @error('selectedService')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group col-12 mt-3">
                <select wire:model="selectedBusinessHourId" class="form-control">
                    <option value="">{{ $emptyOption }}</option>
                    @foreach ($available_business_hour_id as $time)
                        <option value="{{ $time['id'] }}">{{ $time['formattedDayAndDate'] }} od {{ $time['from'] }} do
                            {{ $time['to'] }}</option>
                    @endforeach
                </select>
                @error('available_business_hour_id')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            <div class="form-group col-12 text-center">
                <div class="cta-btns">
                    <button type="submit" class="btn btn-service me-sm-2" wire:click="$commit" wire:click="$emit('showVerificationModal')"
                        data-bs-target="#exampleModal">Odeslat</button>
                    <livewire:verification-modal />
                </div>
            </div>
        </form>

    </div>
</section>


@push('scripts')
    <script>
        document.addEventListener('livewire:load', function () {
            Livewire.on('showVerificationModal', function () {
                $('#exampleModal').modal('show');
            });
        });
    </script>
@endpush

confirmation modal component

<?php

namespace App\Livewire;

use Livewire\Component;

class VerificationModal extends Component
{
    protected $listeners = ['showVerificationModal' => 'open'];

public function open()
{
    $this->dispatch('showVerificationModal');
}


    public function render()
    {
        return view('livewire.verification-modal');
    }


}

confirmation blade

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="verification-code-container">
                {{-- <input type="text" wire:model="verification_code" id="verification_code" name="verification_code" class="form-control" placeholder="Verifikační kód" required> --}}
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

and this is event

<?php

namespace App\Events;

use App\Models\Reservation;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class ShowVerificationModal
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $reservation;

    public function __construct(Reservation $reservation)
    {
        $this->reservation = $reservation;
    }
}

I am using livewire 3.