Getting different results when clicking a specific element

Question

Can someone help me why i am getting different result tho i am clicking the correct element.

Here's the code for the step definition file:

When(/^I select a Product from search results$/, async function () {
  const {
    name,
    price,
    retailer,
  } = await universalHeader.selectProductFromResults()
  await this.setTestData('productName', name)
  await this.setTestData('productPrice', price)
  await this.setTestData('productRetailer', retailer)
})

And for the index file:

async selectProductFromResults() {
    const products = await $$(selectors.productCards)
    const product = await common.getRandomNumber(products)
    const name = await (await $(`${selectors.productName}`)).getText()
    const price = await (await $(`${selectors.productPrice}`)).getText()
    const retailer = await (await $(`${selectors.productRetailer}`)).getText()
    retailer.replace('Sold by ', '')
    await product.click()
    return {
      name,
      price,
      retailer,
    }
  }

Please see the screenshot below for the issue encountered screenshot