Webpack 5 splitChunks configuration

Question

I want to export testD file into 2 seperate files. One file which is called immediately and the other which is called async.

From my webpack configuration, my settings are such that allow testD to be splitted into 2 files.

But from the picture below i see that asyncVendors configuration is overridden. Lodash async file shouldnt have the asyncVendors name instead of asyncCommon name?

webpack config

const baseConfig = {
  mode: "development",
  context: path.resolve("./src"),

  entry: {
    testA: { import: path.resolve("./src/testA.js") },
    testB: { import: path.resolve("./src/testB.js") },
  },
  devtool: "source-map",
  target: "web",
  output: {
    path: path.resolve("dist"),
    publicPath: "/dist/",
    clean: true,
    environment: {
      arrowFunction: false,
    },
  },
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: "initial",
      minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          minSize: 30000,
          maxSize: 200000,
        },
        asyncVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "asyncVendors",
          chunks: "async",
          minSize: 30000,
          maxSize: 200000,
        },
        asyncCommon: {
          name: "asyncCommon",
          chunks: "async",
          maxSize: 900,
        },
      },
    },
    runtimeChunk: "single",
  },
}

testA.js

import("lodash");
import("./testD.js");

console.log(square);

export default function () {}

testB.js

import { square } from "./testD.js";
import _ from "lodash";

console.log(circle, square);

testD.js

export function square() {
  console.log("hello");
}

export function circle() {
  console.log("hello");
}