CreateAction not doing anything after click

public function createNewTrainingEvent(): Action{
    return CreateAction::make()
        ->label('New Training Event')
        ->model(TrainingEvent::class)
        ->form(TrainingEventResource::getFormSchema());
}

<x-filament-panels::page>
    <div id='calendar-container'>
        <div class="grid md:grid-cols-12 sm:grid-cols-1">
            <div class="md:col-span-4 col-span-12">
                {{ $this->createNewTrainingEvent }}
                <x-filament-actions::modals />
            </div>
            <div class="md:col-span-8 col-span-12 tdta_back_calendar" wire:ignore>
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
    <script type="module">
      // full calendar scripts here
    </script>
@endpush

protected function getHeaderActions(): array
{
    return [
        CreateAThe ction::make()
            ->label('New Training Event')
            ->model(TrainingEvent::class)
            ->form(TrainingEventResource::getFormSchema())
    ];
}