I have 2 forms inside a livewire component :

<div
    x-data="{open: false}"
    x-show="open"
    x-transition
    x-cloak
    x-on:filter.window="open = !open">
    <form
        id="filter-form"
        wire:submit="filter"
        class="inline-flex w-1/4"
        >
        ...
    </form>
    <div>
        <!-- The button form 1st form -->
        <button
            type="submit"
            form="filter-form">
            Terapkan
        </button>

        <form
            id="reset-form"
            wire.submit="resetFilter"
            x-on:click="open = !open"
            >

            <!-- the button for the 2nd form -->
            <button
                type="submit"
                form="reset-form">
                Reset
            </button>
        </form>
    </div>
</div>

Livewire class :

<?php

namespace AppLivewireUsers;

use LivewireComponent;

class Filter extends Component
{
    public $departments;
    public $selectedDepartments = [];

    public function mount()
    {
        $this->departments = AppModelsDepartment::all();
    }

    public function filter()
    {
        $this->dispatch('user-filtered', parameters: [
            'selectedDepartments' => $this->selectedDepartments,
        ]);
    }

    public function resetFilter()
    {
        $this->reset();
        $this->dispatch('user-filtered');
    }

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

The first form (filter-form) is working just fine,
However after submitting the second form (the reset form) the page is reloaded and the url was changed from http://my-app.test:8080/administrator/users to http://new-my-app.test:8080/administrator/users?

What should i do ?