Hi I am trying to find the solution for my team where they need to fetch data from api and then they need to loop through this data to verify ui. Because of data hoisting forEach and api call happening at the same time and unable to wait before for loop starts. I have written a code snippet to explain above problem

let data = [
  {
    car: 'BMW',
    usecases: [{usecaseName: 'oil change'}],
  },
  {
    car: 'Toyota',
    usecases: [{usecaseName: 'tyre change'}],
  },
];
before(() => {
  // Assume below data are being fetched via api and updating existing data set declared above
  data = [
    {
      car: 'Honda',
      usecases: [{usecaseName: 'detailing'}],
    },
  ];
});

describe(`All test`, {tags: '@testConcept'}, () => {
  data.forEach((el) => {
    describe(`EX 1:`, () => {
      it(`Test Track :  ${JSON.stringify(el.car)}`, () => {
        cy.log(el.car); // expected Data Center Compute
      });

      el.usecases.forEach((el2) => {
        it(`Test case :  ${JSON.stringify(el2.usecaseName)}`, () => {
          cy.log(el2.usecaseName); // expected Simplified Operations
        });
      });
    });
  });

  describe(`EX 2:`, () => {
    data.forEach((el) => {
      it(`Test ===== :`, () => {
        cy.log(el); // expected Data Center Compute
      });
    });
  });

  describe(`EX 3:`, () => {
    it(`Test ===== :`, () => {
      cy.log(data); // expected Data Center Compute
    });
  });
});

In above example data is always printed from what i have declared at the top and not inside before loop. do any of you have ever need to do it and how did you solve it?