Why does the mat paginator break when I delete a record from the mat table?

Question

I have the following table that shows records that are in the database, the table shows the records 10 by 10 because the paginator is configured like this, the table also allows editing the fields and deleting the records.

when deleting a record it does so without problem and automatically refreshes the table and what was deleted is no longer shown, this is done when you delete any of the 10 records that are shown first, if I delete record 12, 13 or 14 that are already part of the other range of the paginator, when it is refreshed the paginator breaks and shows all the complete records that there are, how can I do so that when deleting a record that is one of the later ones of the first range of the paginator it does not break and show only the records that there is in that range of the pager where the record was deleted

this is my html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                            <ng-container matColumnDef="id">
                                <th mat-header-cell *matHeaderCellDef> ID </th>
                                <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                            </ng-container>

                            <ng-container matColumnDef="desc>
                                <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th>
                                <td mat-cell *matCellDef="let element">
                                    <mat-form-field>
                                        <input matInput type="text" [value]="element.desc"
                                            (keyup)="changeValueDesc($event.target,element)"
                                            [disabled]="!element.editable">
                                    </mat-form-field>
                                    <br>
                                    <span class="error" *ngIf="element.limiteExcedido">El tamaño máximo para este campo
                                        es
                                        de 20</span>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="botonTipoActions">
                                <th mat-header-cell *matHeaderCellDef> ACCIONES </th>
                                <td mat-cell *matCellDef="let element">
                                    <button mat-icon-button color="primary"
                                        (click)="actualizar(element,tipoProductoModel)"
                                        matTooltip="Editar registro">
                                        <mat-icon>edit</mat-icon>
                                    </button>
                                    <button mat-icon-button color="warn"
                                        (click)="eliminar($event.target,element)"
                                        matTooltip="Eliminar registro">
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns">
                            </tr>
                        </table>
                    <mat-paginator #paginatorTipo="matPaginator" [pageIndex]="0" [pageSize]="10"
                        [pageSizeOptions]="[10]" showFirstLastButtons>
                    </mat-paginator>

componet.ts

 tipoProducto: TipoProducto[] = [];     
  @ViewChild('paginatorTipo') paginatorTipo!: MatPaginator;         
                    
                    
  dataSource: any;
  obtenerTipo) {
    this.productService.obtenerTipo().subscribe(response => {
      if (response.data.length == 0) {
        Swal.fire({
          icon: 'error',
          text: 'Sin datos para mostrar'
        })
      } else {
        this.tipoProducto = response.data;
        this.dataSource = new MatTableDataSource(this.tipoProducto);
        this.dataSource.paginator = this.paginatorTipo;
      }

    });
  }
  
  async eliminar(element: any, row: any) {
    const deleteAlert = Swal.fire({
      title: '¿Está seguro de eliminar los valores?',
      showDenyButton: true,
      confirmButtonText: 'Si',
    });
    if ((await deleteAlert).isConfirmed) {
         const index = this.dataSource.data.indexOf(element);
          this.dataSource.data.splice(index);
          this.dataSource = new MatTableDataSource(this.dataSource.data);
         
         this.tipoProductoModel.idTipo = row.idTipo;
          this.productService.eliminarTipo(this.tipoProductoModel).subscribe(response => {
            Swal.fire({
              icon: 'success',
              title: 'Éxito',
              text: 'Registro borrado correctamente'
            });
          });
    }
  }