Ionic 4 virtual scroll header doesn't group by last names

Ionic Framework
1

hey guys so I am making a Contacts page where the last names are grouped based on the first letter. All last names beginning with A are grouped under ‘A’, etc. I have the problem where that isn’t the case. It creates a header for all of them. If I have two people with the last name of ‘Smith’ then both of them will have the header ‘S’.
here is my html

<ion-content>
  <ng-container *ngIf="contactList$">
    <ion-virtual-scroll [items]="contactList" [ngClass]="{ dinamicBorders: results }" [headerFn]="headerFn">
      <ion-item-divider *virtualHeader="let header">
        {{ header }}
      </ion-item-divider>
      <ion-item *virtualItem="let c" [ngClass]="{ 'hide-item': c.empty }">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }} - {{ c.specialty }}</ion-label>

        <ion-label position="stacked">{{ c.hospitals[name] }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

and here is contact.ts

  public headerFn(record: Contact, recordIndex: number, records: Contact[]): string {
    let i: string;
    const char = record.lastNames[0].toUpperCase().replace('À', 'A');
    if (char !== i) {
      i = record.lastNames[0];
      return record.lastNames[0].toUpperCase();
    }
    return null;
  }
2

You need to look at the previous record and return NULL if it has the same start…