How to create multiple html reports in playwright for multiple spec files ? Kindly assist

Question

I'm fairly new to Playwright, and I'm stuck and unable to generate HTML reports. I'm using basic playwright report (index.html) which gets updated every time in run a different spec file.

Also if I share the index.html file, the other person cannot see any content.

Can someone please help me in creating a separate HTML report based on individual spec files? Also if shared, the report should be viewable.

the below is my config file :

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

    const config: PlaywrightTestConfig = {
      // globalSetup: require.resolve('./global-setup.ts'),
      // globalTeardown: require.resolve(''),       //we will use this later
      testDir: './FeatureSpecs',
      /* Maximum time one test can run for. */
      timeout: 130 * 1000,
      expect: {
        /**
         * Maximum time expect() should wait for the condition to be met.
         * For example in `await expect(locator).toHaveText();`
         */
        timeout: 50000
      },
      /* Run tests in files in parallel */
      // fullyParallel: true,
      
      retries: process.env.CI ? 2 : 0,
      /* Opt out of parallel tests on CI. */
      workers: process.env.CI ? 1 : undefined,
      /* Reporter to use. See https://playwright.dev/docs/test-reporters */
      reporter: 'html',
      use: {
        storageState: './storage/admin.json',
        actionTimeout: 0,
        headless: true,
    
        // baseURL: 'http://localhost:3000',
    
        trace: 'on-first-retry',
      },
    
      /* Configure projects for major browsers */
      projects: [
        {
          name: 'chromium',
          // use: {
          //   ...devices['Desktop Chrome'],
          // },
        },
    
      ],
    
      /* Folder for test artifacts such as screenshots, videos, traces, etc. */
      // outputDir: 'test-results/',
    
      /* Run your local dev server before starting the tests */
      // webServer: {
      //   command: 'npm run start',
      //   port: 3000,
      // },
    };
    
    export default config;

Thanks in advance