How can I dynamically load Webpack 5 split chunks on demand?

I’m using Webpack 5’s splitChunks to optimize my bundles and load them on demand. Here’s the general setup in my Webpack configuration:

optimization: {
  splitChunks: {
    chunks: 'all',
    minChunks: 2,
    cacheGroups: {
      main: {
        test: /src/(utils|services|actions/framework|reducers/framework|pages/index.js)/,
        name: 'main',
        priority: 3,
        enforce: true,
        reuseExistingChunk: true
      },
      secondBundle: {
        test: /src/(components/(Homepage|Search|ProductPage|Category)|viewModel/(homepage)|pages/(Homepage|Search|ProductPage|Category))/,
        name: 'secondBundle',
        chunks: 'all',
        priority: 2,
        enforce: true,
        reuseExistingChunk: true
      },
      thirdBundle: {
        test: /src/components/.*/,
        name: 'thirdBundle',
        priority: 1,
        enforce: true,
        reuseExistingChunk: true
      }
    }
  },
}

What I’m Trying to Achieve:

Initial Load: I want to load the main and secondBundle on the landing page. These bundles should contain everything necessary to render the page fully.
Post-Load: After the initial page load, I want to load the thirdBundle dynamically, only when the user navigates to /home.

The Problem:
Even though I’ve verified through Webpack Analyzer that the required files for the /home route are already included in the first two bundles (main and secondBundle), the page doesn’t fully load when navigating to /home.
I expect that after the initial page load, the third bundle (thirdBundle) should load asynchronously and complete the page, but it doesn’t seem to be happening as expected.

What I’ve Tried:

I’ve confirmed that the chunks for /home are present in the initial bundles via Webpack Analyzer.
I’ve attempted to load the third bundle programmatically after the page load, but it doesn’t seem to be completing the page render.

Questions:
Why is the page not fully loading, even though the required files for /home are part of the first two bundles?
Is there a specific Webpack configuration or method I’m missing to ensure that the third bundle loads after the initial page load, without blocking the page’s render?

Additional Info:

The Webpack configuration seems to be properly splitting the chunks, and I’m using chunks: ‘all’ to ensure all potential code is included.
I also have an enforce: true flag set on all cache groups to make sure the chunks are being created correctly.

Could there be an issue with how Webpack is processing the chunks, or am I missing something, a configuration maybe regarding how bundles are loaded dynamically after the initial load?

I appreciate any help or suggestions on how to fix this issue!