Alpine JS Modal doesn't open

I'm using Laravel Breeze. I've implemented a breeze modal component for confirmation.

< x-danger-button x-data="" x-on:click.prevent="$dispatch('open-modal', { name: 'confirm-feature-deletion', featureId: {{ $feature->id }} })"> {{ __('admin/plans/features.deleted.table.forcedelete.link') }} </ x-danger-button>

I use this button to trigger the modal opening. However, it doesn't seem to function as expected.

Here's the modal structure:

< x-modal name="confirm-feature-deletion" maxWidth="sm" focusable> < form x-data="{ featureId: null }" x-on:open-modal.window="featureId = $event.detail.featureId;" method="post" :action="'{{ route('panel.plans.feature.forcedelete') }}'" class="p-6"> ... </ x-modal>

The modal code itself follows this structure.

What might be the reason for this issue?