DataPicker Input Format

Question

I want to change the format of the calendar from (MM-DD-YYYY) to spanish format (DD-MM-YYYY). I don't understand what I have wrong in my code because I follow step by step the DataPicker module documentation. But the calendar only accept the format (MM-DD-YYYY) when I select a date from the datepicker.

Here is my code: stackblitz

Also here I don't understand what is not set the form I'm using reactive form.

private createReactiveForm(): void {
    // Mes/Dia/Ano
    console.log(new Date());
    this.modalForm = this.formBuilder.group({
      
      //I WANT TO ACCEPT THIS FORMAT DD-MM-YYYY (17-03-2023)
      expirationDate: new UntypedFormControl(new Date('17-03-2023'), [
        Validators.required,
      ]),
    });
  }

I read the solution from this post but I still have the same problem.

How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?

Thank you very much.