Cypress – unable to push elements to array

I am new to cypress and exploring its features. I was just trying to extract text from list of elements and save them into array. I was able to successfully extract the text but unable to push them into an array(the array returned is empty). I wasn’t sure what exactly is the issue, can someone help me understand what is the issue in the below code

    /// <reference types="Cypress"/>
    
    class HomePage {
        
        getSearchBox() {
            return cy.get('input[type="search"]')
        }
        
        performSearch(searchTerm) {
            this.getSearchBox().type(searchTerm)
        }
    
        getProductNameElements() {
            return cy.get('h4.product-name')
        }
    
        extractProductNames() {
            var products = []
            this.getProductNameElements().each(function($element) {
                var name = $element.text()
                cy.log(`Adding ${name} to the product array`)
                products.push(name)
            })
            return products
        }
    
    }

export const homepage = new HomePage()

Test that is being executed:

/// <reference types="Cypress"/>
import { homepage } from "../support/pages/homepage"

describe('Home page tests', ()=> {

  beforeEach(function() {
      cy.visit('/')
      cy.fixture('homepage-data').then(function(data) {
        this.data = data 
      })
  }) 

  it('Validate Search functionality on Home Page', function() {
      cy.log('Performing search with search term : ' + this.data.searchTerm)
      homepage.performSearch(this.data.searchTerm)
      cy.wait(1000)
      let products = homepage.extractProductNames()
      cy.log('Length of the array is ' + products.length)
      products.forEach(product => {
        cy.log(product)
      })
  })

})