Cannot close modal after validation

public function table(Table $table): Table
{
    $user = auth()->user();

    $client = Client::query()->where('id', $user->client_id)->first();

    return $table
        ->query($client()->getQuery())
        ->columns(
            [
                ViewColumn::make('deadlines')
                    ->label('Deadlines')
                    ->view('filament.tables.columns.client.deadlines')
            ]
        );
}

submit

<x-filament::modal :close-button="true" id="test" width="xl">
  <x-slot name="heading">
         Heading
  </x-slot>

  <!-- Modal Content -->
  <div>
    {{ $this->form }}
  </div>

  <x-slot name="footer">
    <x-filament::button style="float: right;"
        wire:click="submit()">
        Submit
    </x-filament::button>
  </x-slot>
</x-filament::modal>

form

public function form(Form $form): Form
{
    return $form
        ->schema([
            \Filament\Forms\Components\TextInput::make('test_field')->required()
        ]);
}

submit

public function submit(): void
{
    // Validate the data
    $validatedData = $this->form->validate();
}

x-on:click="$dispatch('open-modal', {id: 'test'})"

TextInput

Submit