How to open a filament modal using dispatch?

ViewColumn::make('services')
->label('Deadlines')
->view('filament.tables.columns.custom-column')

@livewire('global-modal')

...

<td wire:click="$dispatch('openModal', { 
    id: {{ $record->id }}, 
    status: '{{ $status }}' 
})"

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class GlobalModal extends Component
{
    public $modalData = [];

    protected $listeners = ['openModal' => 'handleOpenModal'];

    public function handleOpenModal()
    {
        $this->dispatch('open-modal', ['id' => 'global-modal']);
    }

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

<x-filament::modal id="global-modal" width="xl">
    <x-slot name="heading">
        <h2>Modal Content</h2>
    </x-slot>
    <div>
        <!-- Display the modal data -->
        <pre>{{ json_encode($modalData, JSON_PRETTY_PRINT) }}</pre>
    </div>
</x-filament::modal>