Angular mat-table case-insensitive sort is not working

Question

I have an Angular mat-table that won't sort case-insensitively. I've tried many different ways and nothing works. Here's my latest attempt:

template:

<table mat-table [dataSource]="dataSource" matSort matSortActive="customer" matSortDirection="asc">

  <ng-container matColumnDef="customer">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Customer Name</th>
    <td mat-cell *matCellDef="let element">{{element.customer}}</a> </td>
  </ng-container>...

component

export class Customer {
  customerid: number;
  name: string;
  phone: string;
}

export class CustomerComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  dataSource = new MatTableDataSource<Customer>([]);

  ngOnInit() {
    this.dataSource.sortingDataAccessor = (data, sortHeaderId) => data[sortHeaderId].toLocaleLowerCase();
  }
    
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

The dataSource gets populated from a database query. The table sorts fine but all the uppercase customers appear first, followed by the lower case ones.

Suggestions?