Livewire variables issue on create

i have this in component

<?php

namespace App\Livewire\Screen;

use App\Models\Sitemap;
use Livewire\Component;

class SitemapScreen extends Component
{
    public string $title = '';
    public string $icon = '';
    public string $url = 'Same as screen title';
    public int $tabIndex = 0; // Default tab index

    public function validateInput()
    {
        $this->updateUrl();

        $this->validate([
            'title' => 'required|unique:sitemaps,title',
            'icon' => 'required',
        ]);
    }

    protected function updateUrl()
    {
        $this->url = trim($this->title) === '' ? 'Same as screen title' : $this->title;
    }

    public function save()
    {
        Sitemap::create([
            'title' => $this->title,
            'icon' => $this->icon,
            'url' => $this->url,
        ]);

        return redirect()->route('sitemap')->with('success', 'Sitemap saved successfully');
    }

    public function setActiveTab($index)
    {
        $this->tabIndex = $index;
    }

    public function render()
    {
        return view('livewire.screen.sitemap-screen');
    }
}

then i have this in blade

<div>
    <x-form-card
        title="Sitemap Creation"
        :actionButton="true"
        :isIcon="true"
        icon="handyman"
        column="4"
        row="1"
        saveAction="sitemap.save"
        summaryUrl="dashboard"
        :disabled="$errors->any() || empty($title) || empty($icon)"
    >
        <x-slot name="form">
            <div>
                <x-input
                    label="Icon"
                    fieldName="icon"
                    wire:model="icon"
                    wire:keydown.debounce.300ms="validateInput"
                    placeholder="Type icon name here"
                />
                <x-button
                    class="mt-2"
                    href="https://fonts.google.com/icons"
                    target="_blank"
                >{{ __("Find Icon's here") }}
                </x-button>
            </div>

            <x-input
                label="Screen Title"
                fieldName="title"
                wire:model="title"
                wire:keydown.debounce.300ms="validateInput"
                placeholder="Please enter screen title"
            />

            <div>
                <x-input-label>Url</x-input-label>
                <x-label class="mt-3">{{ $url }}</x-label>
            </div>
        </x-slot>

        <x-slot name="tab">
            <x-tab-label wire:click="$set('tabIndex', 0)" :active="$tabIndex === 0">Tab 1</x-tab-label>
            <x-tab-label wire:click="$set('tabIndex', 1)" :active="$tabIndex === 1">Tab 2</x-tab-label>
            <x-tab-label wire:click="$set('tabIndex', 2)" :active="$tabIndex === 2">Tab 3</x-tab-label>
        </x-slot>
    </x-form-card>
</div>

My Sitemap model was

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Sitemap extends Model
{
    use HasFactory;
  /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = ['title', 'icon', 'url'];

    /**
     * Get the fields for the sitemap.
     */
    public function fields()
    {
        return $this->hasMany(SitemapField::class);
    }
}

but after triggering saving it always null value

title = " "
icon = " "
url = "Same as screen title"

i think i need to run some command to able to fill up the sitemap model