Playwright expect timeout doesn’t work properly if you define a timeout on the playwright configuration file

Question

I defined timeout 30 * 1000 for expect in playwright.config.ts file:

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import * as os from 'os';


const config: PlaywrightTestConfig = {
  globalSetup: require.resolve('./global-setup'),
  testDir: './tests',
  timeout: 30 * 1000,
  expect: {
    timeout: 30 * 1000,
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  reporter: process.env.CI ? [['dot'], ['html', { open: 'never' }]] : 'list',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    baseURL: process.env.BASEURL,
    storageState: `${os.tmpdir()}/auth.json`,
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
      },
    },
  ],
};

export default config;

On my test I run this code and it's failed: await expect(this.page.locator('data-test-id=side-bar')).toBeVisible();

Getting this error: Error: expect(received).toBeVisible() Call log:

• expect.toBeVisible with timeout 5000ms
• waiting for selector "data-test-id=side-bar"

But when running this code it works and the test passed:

 await expect(this.page.locator('data-test-id=side-bar')).toBeVisible({
      timeout: 30000,
    });

What Am I doing wrong?