Dynamically rendering components in livewire

Hey guys,

Im working on a stepper component that renders different component based on the current step.

I came up with the following test scenario, but its not working and i don't understand why:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ParentTest extends Component
{
    public $component_name;

    protected $listeners = ['setChild'];

    public function setChild($number): void
    {
        $this->component_name = 'child' . $number;
    }

    /**
     * @throws \Exception
     */
    public function render()
    {
        return view('livewire.parent-test');
    }
}

<div>
    <div class="p-8">
        <x-button type="button" wire:click="setChild(1)"
                  label="{{ __('Child 1') }}" class="mb-3"/>

        <x-button type="button" wire:click="setChild(2)"
                  label="{{ __('Child 2') }}" class="mb-3"/>

        <x-button type="button" wire:click="setChild(3)"
                  label="{{ __('Child 3') }}" class="mb-3"/>
    </div>

    <p class="bg-green-500 text-white p-2">{{$component_name}}</p>
    
    @if(isset($component_name))
        @livewire($component_name)
    @endif
</div>

Route::get('/nested', ParentTest::class);

Only the first button i clicked seems to render, if i click on another button the $component_name (green text) is changed, but the @livewire($component_name) does nothing:

To be clear i have 3 child components that only render a view with the text Child 1, Child 2 and Child 3 in it.