Cypress test always fails in GitHub Actions & headless, but not locally in normal mode?

I have a Cypress test that checks for the presence of a data-cy within another data-cy.

This test passes when I run Cypress locally in Chrome. It fails when I run it in headless mode locally. It fails regardless of what mode it is run under, when ran in GitHub Actions.

When it fails locally in headless mode, I can see the element rendered that it is apparently failing to find on the DOM, in the screenshots & video.

I'm baffled. I've tried changing Node versions on GitHub Actions, I've tried a separate Cypress test step rather than using the Vue CLI. I've even tried running it within a Windows container and forcing Chrome instead of Electron. I've even tried adding sleeps/timeouts.

Here is the test:

  it("When I choose 4-4-2, I see the expected combination of players", () => {
    cy.get("[data-cy=formation-selector-1]").select("4-4-2");
    cy.get("[data-cy=formation-1]").within(() => {
      cy.get("[data-cy=goalkeeper]")
        .its("length")
        .should("eq", 1);
    });
  });

The error message always says: CypressError: Timed out retrying: Expected to find element: '[data-cy=goalkeeper]', but never found it.

Does anyone have any idea, what the culprit possibly could be? Or something I can do to get to the bottom of it? Thanks.