Explanation on how livewire updates components and re-renders content in views

I have a livewire component thet loads a dynamic component based on a $step variable. The idea is to load one of three components based on the value of the variable. The variable is updated when the user clicks a button.

<div class="flex-1 flex flex-col">
    <livewire:reservation.progress />

    <livewire:dynamic-component :component="'reservation.step' . $step" />

    <div class="block text-right">
        <x-button wire:click="nextStep" type="button" title="{{ __( 'Next' ) }}" class="bg-lime-400 rounded px-6 py-2.5 text-center text-nowrap text-slate-900 border border-slate-900 hover:text-white hover:bg-slate-900 transition-colors duration-300">
            <i class="fa-solid fa-right-long"></i>
        </x-button>
    </div>
</div>

The nextStep function is implemented like this:

public function nextStep(): void
{
    $this->step += 1;
    if ( $this->step > 3 ) {
        $this->step = 1;
    }
}

My question is... why the dynamic component is not being updated when the user clicks the button. Shouldn't the component refresh when it is changed?

With Livewire 3 the syntax is:

<livewire:dynamic-component :is="$componentName" :key="$uniqueKey" />

or, alternatively:

<livewire:is :component="$componentName" :key="$uniqueKey" />

The :key is mandatory