My code has been updated with the following recommendations but this recommendation does not fix the existing issue I encounter which is Uncaught Could not find Livewire component in DOM tree

<x-layouts.wizard :title="'On boarding - ' . ($step ?? '')">
    <div class="flex flex-col gap-4 min-h-0">
        <livewire:dynamic-component :is="'questionnaires.'.$step" :key="$step" />
    </div>
</x-layouts.wizard>

class Questionnaire extends Component
{
    public string $step = 'step-one';
    public array $titles = ['Contact Information', 'Contract Signing', 'Payment', 'Questionnaire'];
    public array $componentMap = ['step-one', 'step-two', 'step-three', 'step-four'];

    #[On('next-step')]
    public function nextStep(): void
    {
        $currentIndex = array_search($this->step, $this->componentMap);
        $this->step = $this->componentMap[$currentIndex + 1];
    }

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

UPDATE: I change the @if @else blade to

<x-layouts.wizard :title="'On boarding - ' . ($titles[$step - 1] ?? '')">
    <div class="flex flex-col gap-4 min-h-0">
        <livewire:dynamic-component :component="'questionnaires.'.$componentMap[$step]" :key="$componentMap[$step]" />
    </div>
</x-layouts.wizard>

But still the same issue, page still crashes when $step is incremented. I have to reload the page and manually set the $step to access different component view

I have multiple livewire component wrapped insisde the if condition. I am able to load the initial page however the page just crashes whenever I go to the next step.

<div class="flex flex-col gap-4 min-h-0" wire:key="questionnaire-step-{{ $step }}">
    @if ($step == 1)
        <livewire:questionnaires.step1 wire:key="q-step1" />
    @elseif ($step == 2)
        <livewire:questionnaires.step2 wire:key="q-step2" />
    @elseif ($step == 3)
        <livewire:questionnaires.step3 wire:key="q-step3" />
    @endif
</div>

This is how the parent component looks like, nextStep is getting triggered by a dispatch from its child components named #[On('next-step')]

    #[On('next-step')]
    public function nextStep(): void
    {
        $this->dispatch('$refresh');
        $this->step = $this->step + 1;
    }

Whenever the step is changed to render another component I get this error on the console. Uncaught Could not find Livewire component in DOM tree