Webpack 4 code splitting not working with React.lazy

Hi all I am using webpack 4 and having issues in code-splitting, I have a file main.js that ned to import 5 components that also need to be code-splitted and lazy-loaded with react-router. Now each of the components has their own directory in the source code with an index.js file(it export the component as default export) being the main export file and Is also the file I am importing in main.js for each of the 5 components. I am using lazy loading for these 5 components with React.lazy, but for some reason, they all get bundled into the same chunk for example - packs/js/index.chunk.js. But when I change the name of the main export file(index.js) to something else for each of the 5 components and the file name also is unique for each component then lazy-loading works. What I want is to keep the file name the same as the index.js for each of the components and attain lazy-loading. I tried magic comments like below but had no success with it.

const x1 = lazy(() => import(/* webpackChunkName: "x1" */ './x1'));

Below is the webpack config

    optimization: {
      concatenateModules: false,
      splitChunks: {
        chunks(chunk) {
          return true;
        },
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: Infinity,
        maxInitialRequests: Infinity,
        automaticNameMaxLength: 30,
      },
  }                                                                                                                                                                                            
  output: {
    filename: 'js/[name].[chunkHash:6].js',
    chunkFilename: 'js/[name].[chunkHash:6].chunk.js',
    publicPath: `${process.env.CDN_HOST}/packs/`,
  }