An issue in calling a Livewire component inside custom field

I am trying to Call a liveware component inside a Filament custom component. but I get in browser console:

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h

the custom Field:

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

the view filament.import-lesson-material blade:

@livewire('create-post')

@livewire('create-post')

@livewire('create-post')

@livewire('create-post')

the liveware component:

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

the view livewire.create-post blade:

<div>
    here we go...
</div>

<div>
    here we go...
</div>

<div>
    here we go...
</div>

<div>
    here we go...
</div>

the custom field usage inside filament EditPage:

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

To be noted: