Error: route.fetch: Browser has been closed

Hello, I am doing a PW Udemy course and there is example of using route.fetch to manipulate an API response.

It works only while using the debug mode or when using page.pause() before the expected interfered response is expected.

I found the solution to this problem here: https://github.com/microsoft/playwright/discussions/12810

The problem is that without explicitly adding await page.waitForResponse(url);

I got an error: Error: route.fetch: Browser has been closed

This code causes the mentioned error:

await page.route(
    /api\/ecom\/order\/get-orders-for-customer\/.*/,
    async (route) => {
      const body = JSON.stringify({ data: [], message: "No Orders" });
      const response = await route.fetch(); // -> Error: route.fetch: Browser has been closed

      await route.fulfill({
        response,
        body,
      });
    }
  );
  await ordersMenuButton.click();

After adding the explicit waitForResponse it works fine:

await page.route(
    /api\/ecom\/order\/get-orders-for-customer\/.*/,
    async (route) => {
      const body = JSON.stringify({ data: [], message: "No Orders" });
      const response = await route.fetch();

      await route.fulfill({
        response,
        body,
      });
    }
  );
  await ordersMenuButton.click();
  await page.waitForResponse(/api\/ecom\/order\/get-orders-for-customer\/.*/);

I think it should be mentioned in the documentation here: https://playwright.dev/docs/api/class-route#route-fetch

Or I don't understand this concept and it is obvious but my lack of experience with PW doesn't allow me to notice it if so could someone explain it to me?