How to setup Playwright when I am using playwright config and I want to declare `page` in beforeAll so I can use it in multiple tests in the same spec

Here is how I have my playwright config file:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: [
    ['list'],
  ],
  timeout: 30000,
  projects: [
    {
      testDir: `${process.cwd()}/qe/specs/e2e/`,
      testMatch: '*_spec.ts',
      name: 'Chrome Local',
      use: {
        viewport: { width: 900, height: 700 },
        launchOptions: {
          channel: 'chrome',
        },
        headless: false,
      },
    },
  ]}

Here is my spec file:

import { test } from '@playwright/test';

const BASE_URL = process.env.URL || 'http://www.google.com';
let page: any;

test.describe('Main Block Test', () => {
  test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
 });

  test('Testing block 1', async ({ page }) => {
    await page.goto(BASE_URL);
    await page.waitForTimeout(2000);
  });
 test('Testing block 2', async ({ page }) => {
    await page.goto('www.google.com);
    await page.waitForTimeout(2000);
  });
});

This kinda works but the viewport set in config file is not respected. I know if declare page in every test block, then it will be, but there has to be a better way to do this and be able to declare page in beforeAll and use it throught? Any help will be great. Thank you!