Conditional Form Not Revealing After Event Dispatch

I have this company registration form.

• A user can have multiple companies, and a company can have multiple users. Users have roles, editor, and admin.
• A company creation is a multi-step process.
  • The first step is to submit a company, with only a name attribute. (I will rework this later, tax ID might be added here.) Once the user enters the company's name, they submit and if it validates (required, unique, etc..) then the company is created.

• Now the user is assigned as admin for this new company, and the company is set the current_company for this user.
• At this point, we dispatch an event, companyCreated, which triggers the blade and reveals the secondary form only after.
• The BusinessInfoForm reveals now.

• HasBusinessInfo is a trait since models like Customer, Carrier, etc. can have it too.

create.blade.php

<x-app-layout>
    <x-slot name="header">
        <flux:heading size="xl">{{ __('Create Company') }}</flux:heading>
    </x-slot>

    <div>
        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8">
            @livewire('create-company')

            <!-- Dynamically Rendering Additional Forms after Company Creation -->
            @if($companyCreated)
            
            <!-- Business Info Form -->
            @livewire('create-business-info', ['business_infoable' => $company])

            @endif
        </div>
    </div>
</x-app-layout>

create-company.blade.php

<x-form-section submit="saveCompanyName">
    <x-slot name="title">
        {{ __('Company Details') }}
    </x-slot>

   <x-slot name="form">
        @if ($companyCreated)
        <!-- Show the company name after creation -->
        <div class="col-span-6 sm:col-span-4">
            <flux:heading size="xl">{{ $companyCreated->name }}</flux:heading>
        </div>
        <x-action-message on="companyCreated" class="me-3">
            {{ __('Company Created Successfully.') }}
        </x-action-message>
        @else
        <!-- Show the form if the company isn't created -->
        <div class="col-span-6 sm:col-span-4">
            <flux:input label="{{ __('Company Name') }}" type="text" wire:model="form.name"
                placeholder="Company legal name" autofocus badge="*" required />
        </div>
        @endif
    </x-slot>

    <x-slot name="actions">
        <div class="flex items-center justify-between">
            <x-validation-errors class="flex flex-col alert alert-danger" />
            <flux:spacer />
            @if (!$companyCreated)
            <flux:button variant="primary" wire:click="saveCompanyName" type="submit">
                {{ __('Save Company') }}
            </flux:button>
            @endif
        </div>
    </x-slot>
</x-form-section>

This is my CompanyForm.php

<?php

namespace App\Livewire\Forms;

use \AllowDynamicProperties;
use App\Models\Company;
use Livewire\Attributes\Validate;
use Livewire\Form;

#[AllowDynamicProperties]
class CompanyForm extends Form
{
    public string $name = ''; // Explicitly declare the 'name' property

    // Validation rules for the company name
    #[Validate([
        'name' => 'required|string|max:255|unique:companies,name',
    ], message: [
        'required' => 'The :attribute is required.',
        'string' => 'The :attribute must be a string.',
        'max' => 'The :attribute must not exceed :max characters.',
        'unique' => 'The :attribute has already been taken.',
    ], attribute: [
        'name' => 'company name',
    ])]

    // Store method to create a new company
    public function store()
    {
        // Validate and create a new company
        $validatedData = $this->validate();
        return Company::create(['name' => $this->name]);
    }
}

And this is my CreateCompany.php

<?php

namespace App\Livewire;

use App\Livewire\Forms\CompanyForm;
use App\Models\Company;
use Illuminate\Support\Facades\Log;
use Illuminate\Validation\ValidationException;
use Livewire\Component;

class CreateCompany extends Component
{
    public CompanyForm $form; // Form object for the company form.
    public ?Company $company = null; // Store the created company
    public bool $companyCreated = false; // Track if the company form is completed

    public function mount()
    {
        $this->form = new CompanyForm($this, 'create-company'); // Initialize form.
    }

    public function saveCompanyName()
    {
        if (!auth()->check()) {
            $this->addError('authentication', 'You must be logged in to create a company.');
            return;
        }

        try {
            // Validate and create the company
            $validatedData = $this->form->validate();
            $company = $this->form->store(); // Store the company

            if ($company && $company->id) {
                // Assign user as admin and set as current company
                auth()->user()->companies()->attach($company->id, ['role' => 'admin']);
                auth()->user()->update(['current_company_id' => $company->id]);


                // Dispatch the event with the created company
            $this->dispatch('createdCompany', $company);

            } else {
                Log::error('Company creation failed.');
                $this->addError('company', 'Failed to create the company.');
            }
        } catch (ValidationException $e) {
            foreach ($e->errors() as $field => $messages) {
                foreach ($messages as $message) {
                    if (!$this->getErrorBag()->has($field)) {
                        $this->addError($field, $message);
                    }
                }
            }
        } catch (\Exception $e) {
            Log::error('An error occurred: ' . $e->getMessage());
            $this->addError('exception', 'An error occurred while saving the company.');
        }
    }

    public function render()
    {
        return view('companies.create-company');
    }
}

What is the problem? Am I missing something? Is it about the logic?

Alpay BR