wire:sortable callback has no effect in custom page

<x-filament::page>
    <ul wire:sortable="updateTaskOrder">
        @foreach ($items as $task)
            <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                <h4 wire:sortable.handle>{{ $task->title }}</h4>
                <button wire:click="removeTask({{ $task->id }})">Remove</button>
            </li>
        @endforeach
    </ul>
</x-filament::page>

<x-filament::page>
    <ul wire:sortable="updateTaskOrder">
        @foreach ($items as $task)
            <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                <h4 wire:sortable.handle>{{ $task->title }}</h4>
                <button wire:click="removeTask({{ $task->id }})">Remove</button>
            </li>
        @endforeach
    </ul>
</x-filament::page>