Need suggestion/solution on how to 'Reuse signed in state' in my tests - playwright

Question

I am working on a project where I am trying to achieve 'login one time to complete all my tests instead of logging in everytime for each test' I followed this document. My global setup looks exactly like how it is in the said document.

My test spec looks like this,

//sample.test.ts
test.describe("Login Tests", () => {
test.use({ storageState: "state.json" });
  test(`TEST 1`, async ({ page }) => {
    //browser launches in authenticated state
  });

  test(`Test 2`, async ({ page}) => {
    //browser launches in unauthenticated state
  });
});

//playwright.config.ts
globalSetup: require.resolve("./src/utility/globalSetup.ts"),
use: {
storageState: "state.json",
}

//globalSetup.ts
const { storageState } = config.projects[0].use;
  const browser = await chromium.launch();
  const page = await browser.newPage();
  //code for login goes here....
  await page.context().storageState({ path: storageState as string }); 
  await browser.close();

The issue is my first test (TEST1) works fine - the browser launches in authenticated state. But my second test (TEST2) does not launch in authenticated state.

I tried running one test at a time. TEST1, TEST2 passes in isolated runs.

I swapped the test order, made TEST2 run first, in that case TEST2 launches in authenticated state TEST1 failed.

What could be the problem? Any help is highly appreciated.