Custom livewire component not rendered on paginated table

Hi all.

I have made a simple custom toggle switch component to use in a paginated table. However, when I click on another page, the custom component is missing and from there on I cannot change to another page. Also, in the console I got an error Uncaught Snapshot missing on Livewire component with id: YiG7sodZw6juPsuhk9ve.

The view with the loop:

<div class="flex flex-col gap-6">
    <table>
        <thead>
            <tr>
                <th>{{ __('Name') }}</th>
                <th>{{ __('Active') }}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($this->countries as $country)
                <tr wire:key="{{ $country->id }}">
                    <td>
                        {{ $country->name }}
                    </td>
                    <td>
                        <input
                            type="checkbox"
                            wire:click="update({{ $country->id }})"
                            @if($country->is_activated) checked @endif
                        />
                        <flux:switch wire:click="update({{ $country->id }})" />
                        <livewire:components.toggle-switch :model="$country" :field="'is_activated'" />
                    </td>
                </tr>
            @endforeach
        </tbody>

        {{ $this->countries->links() }}
    </table>
</div>

The component is:

<?php

namespace App\Livewire\Components;

use Illuminate\Database\Eloquent\Model;
use Livewire\Component;

class ToggleSwitch extends Component
{
    public Model $model;

    public string $field;

    public bool $isActive;

    public function mount()
    {
        $this->isActive = (bool) $this->model->getAttribute($this->field);
    }

    public function render()
    {
        return view('components.toggle-switch');
    }

    public function update(): void
    {
        $this->model->setAttribute($this->field, $this->isActive)->save();
    }
}

and the component blade file:

<div>
    <label class="switch">
        <input type="checkbox" wire:model="isActive" x-on:change="$wire.update" />
        <span class="slider round"></span>
    </label>
</div>

Any help appreciated.