FetchNextPage not working properly.

airtable.ts

import Airtable, { Base } from 'airtable';
import { DatabaseRecord } from "../../types/DatabaseRecord.interface";

class AirTable {
  private apiKey: string = import.meta.env.VITE_PWK;
  private apiBase: string = import.meta.env.VITE_PWB;
  public base: Base = this.getBase(this.apiKey, this.apiBase);
  private dbRecords: DatabaseRecord[] = [];
  private fetchNext!: () => void;

  getBase(apiKey: string, apiBase: string): Base {
    return new Airtable({ apiKey: apiKey }).base(apiBase);
  }

  async getRecords() {
    const dbRecords: DatabaseRecord[] = [];
    try {
      const records = await this.base('Projects')
        .select({
          maxRecords: 12,
          view: 'Grid view',
        })
        .firstPage();
      records.forEach((record) => {
        dbRecords.push(record.fields);
      });
      return dbRecords;
    } catch (err) {
      console.error(err);
      throw err;
    }
  }

  async getRecords2() {
    this.base('Projects')
      .select({ pageSize: 12, view: 'Grid view' })
      .eachPage(
        (records, fetchNextPage) => {
          records.forEach((record) => {
            this.dbRecords.push(record.fields);
          });
          this.fetchNext = fetchNextPage;
        }
      );
    return this.dbRecords;
  }

  async getRecords3(): Promise<DatabaseRecord[]> {
    const dbRecords: DatabaseRecord[] = [];
    try {
      await this.base('Projects')
        .select({ pageSize: 12, view: 'Grid view' })
        .eachPage(async (records, fetchNextPage) => {
          records.forEach((record) => {
            dbRecords.push(record.fields);
          });
          this.fetchNext = fetchNextPage;
        });
    } catch (error) {
      console.error('Error fetching records:', error);
      throw error;
    }
    return dbRecords;
  }
}

const db = new AirTable()
console.log(await db.getRecords())
console.log(await db.getRecords2())
console.log(await db.getRecords3())