Livewire reset on initial change

Hello everyone,

I am using Laravel 11, Livewire 3, and alpineJS for this web app I'm creating.

I have a basic dropdown that when the value is changed I utilize updatedFilter() to show the proper values in the table. I am encountering this weird issue, after the page loads for the first time and I change the dropdown value, it shows the new filtered values but immediately resets to default.

I added a modal to this page and it happens to the modal as well: after page loads, if i first open the modal sometimes it closes automatically.

I decided to take a look at the network traffic in chrome I opened "Inspect" and "Network" traffic. I'm not sure how to call this but all the network requests disappear completely and then the network requests appear again with different values in size, and order.

I can already tell is has something to do with livewire, anything pass that I have no idea. Any help to the right direction would be greatly appreciated. Thank you in advance! Here is my code:

Views/Livewire/emails.blade.php

            <div>
                <select id="filter" wire:model.live.debounce.250ms="filter" class="block p-2 mx-4 px-4 border border-gray-300 rounded">
                    @foreach($filterData as $value => $name)
                        <option value="{{ $value }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>

    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Created</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach ($emailData as $type => $group)
                @foreach ($group['emails'] as $email)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">{{ ucfirst($type) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $email->email }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $email->updated_at->format('Y-m-d H:i:s') }}</td>
                    </tr>
                @endforeach
            @endforeach
        </tbody>
    </table>

Livewire/Emails.php

<?php

namespace App\Livewire;
use Livewire\Component;
use App\Models\Member;
use App\Models\Email;

class Emails extends Component
{
    public $memberId;
    public $filter = 'primary'; // Default filter
    public $emailData = [];
    public $filterData = ['primary' => 'Primary Emails','pending'=> 'Pendings Emails','denied' => 'Denied Emails'];
    public $typeOptions = ['personal' => 'Personal', 'contact' => 'Contact'];


    public function mount($memberId) //I am using model route binding
    {
        $this->memberId = $memberId;
        $this->prepareEmailData();
    }

    public function updatedFilter()
    {       
        $this->prepareEmailData();
    }

    public function prepareEmailData()
    {
        $member = Member::find($this->memberId);

        $this->emailData = $member->emails()
            ->where(function ($query) {
                if ($this->filter === 'primary') {
                    $query->where('primary', true);
                } elseif ($this->filter === 'pending') {
                    $query->where('request', true)
                          ->where('primary', false);
                } elseif ($this->filter === 'denied') {
                    $query->where('request', false)
                          ->where('primary', false);
                }
            })
            ->orderByDesc('updated_at')
            ->get()
            ->groupBy('type')
            ->map(function ($group) {
                return [
                    'emails' => $group,
                    'hasSecondaryEmails' => $group->contains(fn($email) => !$email->primary),
                    'deniedRequests' => $group->contains(fn($email) => !$email->primary && !$email->request),
                ];
            });
    }

    public function render()
    {
        return view('livewire.emails', [
            'emailData' => $this->emailData,
        ]);
    }
}

Livewire/Member.php

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Member;

class Members extends Component
{
    public Member $member;

    public function mount(WebMember $member)
    {
        $this->member = $member;
    }

    public function render()
    {
        return view('livewire.members');
    }
}