In Ionic 6/capacitor, Infinite Scroller does not work with SQL lite data

I have some data in a SQL lite database. I’d like to use the infinite scroll to boost performance. I read the Ionic frame documentation at the following link.

https://ionicframework.com/docs/api/infinite-scroll

This is my Home.html

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Routes</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="secondary">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card *ngFor="let route of itemListData">
          <ion-row>
            <ion-col>
              <div class="ion-text-begin">
                {{ route.nameroute }}
              </div>
            </ion-col>
            <ion-col>
              <div class="ion-text-end">
                {{ route.cost }}
              </div>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

And this is my Home.ts file

import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../services/database.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  itemListData = [];
  page_number = 1;
  page_limit = 8;

  constructor(private databaseService: DatabaseService) { }

  ngOnInit() {
    this.getFavoriteRoutes(false, "")

  }

  getFavoriteRoutes(isFirstLoad, event) {
    this.databaseService.getDatabaseState().subscribe((data: any) => {
      for (let i = 0; i < data.length; i++) {
        data = this.databaseService.getRoutes();
        this.itemListData.push(data[i]);
      }

      if (isFirstLoad)
        event.target.complete();
      this.page_number++;
    })
  }

  doInfinite(event) {
    this.getFavoriteRoutes(true, event);
  }

}

And these are my Database Service methods.

  getDatabaseState() {
    return this.dbReady.asObservable();
  }

  getRoutes(): Observable<any[]> {
    return this.routes.asObservable();
  }

Getting the favorite routes works, and all of the data is visible in my ionic app. I modified the getFavourites method to make use of the infinite scroll.

I followed this tutorial to do it.

https://www.freakyjolly.com/ionic-infinite-scroll-example/

The data is no longer visible as a result of the changes.

To improve performance, how can I add infinite scroll to SQL data?