Why does my Selenium script work only every other time?

Question

I think I should start off by mentioning I have Mac OS and am using Safari browser. This script is a web-scraper that is supposed to search for a given type of pastry on a recipe website and look for anyone of the recipes from the search result and log one of the ingredients onto the console.

I am not exaggerating when I say it works every other time. It's as if it's a fixed pattern. It prints an ingredient the first time, then doesn't do anything at all the second time. It'll print ingredient the third time but not the fourth time.

But it doesn't end there. When I run the script on the times that it is supposed to work according to the strange pattern I mentioned, if I am on a different window, it gives me a TimeoutError.

But on the times it doesn't work according to the strange pattern, it doesn't matter whether I am on a different window or not, it runs forever, when actually it's supposed to give me a TimeoutError because of the time limit I placed on it as I am using a fluent wait.

Here is the code:

const { Builder, By, Options, until } = require("selenium-webdriver");
const { elementsLocated } = require("selenium-webdriver/lib/until");
const safari = require("selenium-webdriver/safari");

async function test() {
  let options = new safari.Options();
  let driver = await new Builder()
  .forBrowser("safari")
  .setSafariOptions(options)
  .build();

  //loads the recipe site with the search query for the pastry already added
  let url = "https://www.allrecipes.com/search/results/?search=brownies";
  await driver.get(url);

  //waits for elements with class .card__recipe to load and places them into array
  //each .card__recipe element links to new page with a recipe
  let recipeCardArray = await driver
  .wait(until.elementsLocated(By.className("card__recipe")), 10000, " ", 2000);

  //takes you to recipe
  await recipeCardArray[1].click();

  let ingredientsArray = await driver
  .wait(until.elementsLocated(By.className("ingredients-item-name")), 10000);

  //prints one of the ingredients in the console
  console.log(await ingredientsArray[0].getText());

  await driver.quit();
}

test();

And here is the TimeoutError it gives me when I am on a different window:

/Users/user/Documents/Web/webscraper/node_modules/selenium-webdriver/lib/webdriver.js:901
                new error.TimeoutError(
                ^

TimeoutError: Waiting for at least one element to be located By(css selector, .ingredients-item-name)
Wait timed out after 10205ms
    at /Users/user/Documents/Web/webscraper/node_modules/selenium-webdriver/lib/webdriver.js:901:17
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  remoteStacktrace: ''
}

I am very confused as to what is going on here. I really have no idea why this is happening.