wire:click not working inside of custom field, method not found.

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <div class="max-w-lg p-36 container flex justify-end mx-auto self-center">
            <div class="flex flex-row h-10 w-15">
                <x-filament::icon-button icon="heroicon-m-chevron-left" class="self-center" size="xl" wire:click="previousMonth" />
                <span class="self-center py-6 px-4">{{ $getState() }}</span>
                <x-filament::icon-button icon="heroicon-m-chevron-right" class="self-center" size="xl" wire:click="nextMonth" />
            </div>
        </div>
    </div>
</x-dynamic-component>

class MonthSelector extends Field
{
    protected string $view = 'forms.components.month-selector';

    #[On('previousMonth')]
    public function previousMonth()
    {
        dd('previous month');
    }
}