Livewire 3 Form validation x-mask error

Hey guys!! I'm having a problem with my establishment registration component

I have 1 livewire component that registers the establishment. It receives the state and city of establishment from another component

My establishment component:

<?php

namespace App\Livewire\Establishment;

use App\Models\Establishment;
use Livewire\Attributes\On;
use Livewire\Attributes\Rule;
use Livewire\Component;

class CreateEstablishment extends Component
{
    #[Rule('required')]
    public string $name;

    #[Rule('required')]
    public string $zipcode;

    #[Rule('required')]
    public string $neighborhood;

    #[Rule('required')]
    public string $address;

    #[Rule('required')]
    public int $state_id;

    #[Rule('required')]
    public int $city_id;

    #[Rule('required')]
    public string $number;

    public function render()
    {
        return view('livewire.establishment.create');
    }
    #[On('select-state-city')]
    public function StateCityChange($state, $city)
    {
        $this->state_id = $state;
        $this->city_id = $city;
    }

    public function save()
    {
        $this->dispatch('select-state-city-validation', 'validateStateCity');
        $this->validate();

        Establishment::create(
            $this->all()
        );

        $this->reset();
        $this->dispatch('notify', message: 'Estabelecimento cadastrado com sucesso!!');
        $this->dispatch('close-modal');

    }
}

My dynamic state and city select component:

<?php

namespace App\Livewire;

use App\Models\City;
use App\Models\State;
use Illuminate\Support\Collection;
use Livewire\Attributes\On;
use Livewire\Attributes\Rule;
use Livewire\Component;

class SelectStateCity extends Component
{
    public Collection $states;

    public Collection $cities;

    #[Rule('required')]
    public int $state;

    #[Rule('required')]
    public int $city;

    public function mount()
    {
        $this->states = State::all();
    }

    #[On('edit-state-city')]
    public function editStateCity($stateSelected, $citySelected)
    {
        if($stateSelected !== 0) {
            $this->state = $stateSelected;
            $this->cities = City::where('state_id', $this->state)->get();
            $this->city = $citySelected;

            //dd($this->state, $this->cities, $this->city);
        }
    }

    public function updatedState($state): void
    {
        $this->cities = City::where('state_id', $state)->get();
    }

    public function updatedCity($city): void
    {
        $this->dispatch('select-state-city', state: $this->state, city: $city);
    }

    #[On('select-state-city-validation')]
    public function validateData()
    {
        $this->validate();
    }

    public function render()
    {
        return view('livewire.select-state-city');
    }
}

This is my input of zipcode:

<label for="zipcode">Cep:</label>
<input id="zipcode" name="zipcode" wire:model="zipcode" type="text" x-mask="99999-999">
@error('zipcode')
<span class="text-red-500">
{{ $message }}
</span>
@enderror

My problem is: When I select the state and city, only my zipcode input returns The zipcode field is required. without form validation, I tried to remove x-mask="99999-999" and it works, but I wanted to make it better for the user, does anyone have any idea why this error is happening?