Reload issue with Laravel Livewire and Bootstrap form

I'm seeing a problem with Livewire when I use ANY Javascript form. Use the following form: https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045 (Although I tried other forms and it happens with all of them due to livewire's wire:model events)

The problem is that WIRE:MODEL takes me to the first section and I can't use WIRE:IGNORE because it overrides related SELECT behaviors for me.

In the second section I use the following related form:

  <div class="form-group">
  <label for="provincia">Provincia</label>
  <select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
       <option value=''>Seleccionar provincia</option>
       @foreach($ubicaciones as $ubicacion)
       <option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
       @endforeach                                          
  </select>
  </div>
                                        
    
   <div class="form-group">
   <label for="tipopropiedad">Localidad</label>
   <select wire:model="area" class="form-control" id="localidad
         {{ count($this->areas)== 0 ? 'hidden' : '' }} ">
         <option value=''>Seleccionar localidad</option>
         @foreach($this->areas as $area)
         <option value={{ $area->id }}>{{ $area->name }}</option>
         @endforeach
   </select>
   </div>

And this doesn't allow me to use the WIRE:IGNORE to override the events.

The problem is that any WIRE:MODEL generates an event that takes the form to the first section. It seems to be a REFRESH

Does anyone know how I could use livewire without having this inconvenience?

EDITION

Component Although I have this functionality, I commented it out to see if the problem continued and if it persists.

public function render()
{

    if(!empty($this->ubicacionSeleccionada)) {
        $this->areas = Area::where('ubicacion_id', $this->ubicacionSeleccionada)->get();
    }
    //CREAMOS CODIGO ALEATORIO Y LO ENVIAMOS A LA VISTA
    $caracteres = array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
    $codigo = '';

    for ($i = 1; $i <= 3; $i++) {
        $codigo .= $caracteres[rand(0, 35)];
    }

    return view('livewire.publication.publication-component', [
        'propiedades' => TipoDePropiedad::get(),
        'ubicaciones' => Ubicacion::get(),
        'categorias' => Category::get(),
        'codigoUsuarioPropiedad' => $codigo
    ]);
}

And the method that collects the data: Now I have it in test mode but it brings me all the data well.

public function Publicar()
    {
       dd($this->area);
    }

The problem is based on the WIRE:MODEL fields I tried adding event dispatch time as follows:

<input type="text" wire:model.debounce.500ms="name">

And this works until the time is up . For this reason I know that everything is because of the event that Livewire generates. But I can't find how to fix it.

SOLUTION

I found a way to solve this problem by working it as a pager, in the following way: In the component I declared the variable that is going to act as a counter and pager.

// Paginador | contador
public $pasos;

// La inicializamos en cero 
public function mount()
{
    $this->pasos= 0;
}

// Al presionar el botón siguiente aumenta el contador
public function incrementar()
{
    $this->pasos++;
}

// Al presionar el botón atrás disminuye el contador
public function decremento()
{
    $this->pasos--;
}

in sight

  // Mostramos la vista en base al valor de la variable del contador
    @if($pasos== 0)
       <div>contenido....</div>
    @endif
    
    @if($pasos== 1)
      <div>contenido....</div>
    @endif
    
// Aumenta el contador    
<button wire:click="incrementar()" type="button" class="btn btn-primary">Siguiente</button>

// Decrementa el contador
<button wire:click="decremento()" type="button" class="btn btn-primary">Atras</button>