There is a distinct possibility I may be missing something here. I am following the "Everything New in Livewire 4" series. In the "Islands" portion I am getting a weird issue when utilizing them,

Issue: When I click the refresh icon in any of the islands, ALL the refresh icons animate in all the islands. But in the video, only the one clicked should ne animating and refreshing the island it is located in.

I have tried naming each island, using wire:island="name" and still get the same results. Any help would be greatly appreciated.

Here is the code:

<?php

use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Component;

new class extends Component {

    #[Computed]
    public function realtorsCount(): int
    {
        return User::realtors()->count();
    }

    #[Computed]
    public function realtorActiveCount(): int
    {
        return User::realtors()->active()->count();
    }

    #[Computed]
    public function realtorsPendingCount(): int
    {
        return User::realtors()->pending()->count();
    }
};
?>
<div class="grid gap-4 md:grid-cols-4">
    @island
        <div class="rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex justify-between text-sm text-neutral-600 dark:text-neutral-300">
                <span>Total Realtors</span>
                <flux:button wire:click="$refresh" class="-mt-2" icon="arrow-path" variant="subtle" size="sm" />
            </div>
            <div class="mt-2 text-2xl font-semibold text-neutral-900 dark:text-white">{{ $this->realtorsCount }}</div>
        </div>
    @endisland

    @island
        <div class="rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex justify-between text-sm text-neutral-600 dark:text-neutral-300">
                <span>Total Verified</span>
                <flux:button wire:click="$refresh" class="-mt-2" icon="arrow-path" variant="subtle" size="sm" />
            </div>
            <div class="mt-2 text-2xl font-semibold text-neutral-900 dark:text-white">{{ $this->realtorActiveCount }}</div>
        </div>
    @endisland

    @island
        <div class="rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex justify-between text-sm text-neutral-600 dark:text-neutral-300">
                <span>Users Pending</span>
                <flux:button wire:click="$refresh" class="-mt-2" icon="arrow-path" variant="subtle" size="sm" />
            </div>
            <div class="mt-2 text-2xl font-semibold text-neutral-900 dark:text-white">{{ $this->realtorsPendingCount }}</div>
        </div>
    @endisland
</div>