Why component mat datepicker subtract one day from the date I get? how to fix this?

Question

I have the following table that is filled with a service and the field FECHAREGISTRO is displayed with mat datepicker , but when using the component the date is displayed with one day less and I dont know why or how to solve it

this is my html

<div class="container">
  <div class="scrollme">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="idControl">
        <th mat-header-cell *matHeaderCellDef>ID.</th>
        <td mat-cell *matCellDef="let element">{{ element.idControl }}</td>
      </ng-container>

      <ng-container matColumnDef="cveEstado">
        <th mat-header-cell *matHeaderCellDef>ESTADO</th>
        <td mat-cell *matCellDef="let element" class="select-css" [ngClass]="{'text-red': element.cveEstado=='ERR',
        'text-green': element.cveEstado=='INP', 'text-orange': element.cveEstado=='PEN'}">
          <mat-select [(value)]="element.cveEstado" (selectionChange)="cambiarEstado($event.value, element)"
            [disabled]="!element.editar">

            <mat-option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado"
            [disabled]="deshabilitarOpcion(element.cveEstado).includes(estatus.descripcion)">
              {{ estatus.descripcion }}
            </mat-option>
          </mat-select>
        </td>
      </ng-container>

      <ng-container matColumnDef="comentario">
        <th mat-header-cell *matHeaderCellDef>COMENTARIO</th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field>
            <input matInput [value]="element.comentario" (keyup)="changeValue($event.target, element)"
              [disabled]="!element.editar" />
          </mat-form-field>
        </td>
      </ng-container>

      <ng-container matColumnDef="horaInicio">
        <th mat-header-cell *matHeaderCellDef>HORA</th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field>
            <input matInput [value]="element.horaInicio" (keyup)="changeValueHora($event.target, element)"
              [disabled]="!element.editar"  />
          </mat-form-field>
        </td>
      </ng-container>

      <ng-container matColumnDef="fechaRegistro">
        <th mat-header-cell *matHeaderCellDef>FECHAREGISTRO</th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field appearance="fill" *ngIf="element.fechaRegistro">
            <input matInput [matDatepicker]="picker" [value]="element.fechaRegistro"
              (dateChange)="onDateChange($event.value, element)" [disabled]="!element.editar" />
            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
        </td>
      </ng-container>

      <ng-container matColumnDef="botonSave">
        <th mat-header-cell *matHeaderCellDef>GUARDAR</th>
        <td mat-cell *matCellDef="let element; let i = index">
          <button mat-button (click)="guardar(element)">Guardar</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
    </mat-paginator>
  </div>
</div>

the date I receive the service is like this:

and when it is shown in the mat datepicker it shows it like this, with a less day

this is my component.ts when I use dataAdapter

 constructor(
    private controlService: ControlService,
    private dataAdapter: DateAdapter<Date>
  ) {
    this.dataAdapter.setLocale('es-MX');
  }

  ngOnInit(): void {
    this.obtenerLista();
    this.obtenerListaEstados();
    
  }

  //obtiene la lista del servicio
  dataSource: any;
  private obtenerLista() {
    this.controlService.obtenerLista().subscribe((response) => {
      this.control = response.data;
      console.log("PRUEBA " ,response.data);
      this.dataSource = new MatTableDataSource(this.control);
      this.dataSource.paginator = this.paginator;
    });
  }

//OBTIENE EL VALOR DE LA FECHA SELECCIONADA
  onDateChange(valor: Event, row: any) {
    this.fechaIngresada = valor;
    console.log('FECHA SELECC  ' + this.fechaIngresada);
  }

  formatDateToString(date: Date): string {
    if (date) {
      const format = 'yyyy-MM-dd';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }

Does anyone know how I can correct this? or an alternative solution to show me the correct date please