How to correctly setup sourcemaps for CRA with SourceMapDevToolPlugin?

Question

I have restructured my CRA to become a monorepo with multiple apps.Now it has the below structure.I have also changed a lot of configs to match the current folder structure.

|__ core
|__ apps
|__ shared
|__ config

As it is stated in CRA docs, everything should be under the src folder to compile the project correctly, but now, I have removed it and every single app inside the apps folder has its own entry point. The project is running perfectly for each of the apps, but source maps are not working correctly. .

I am trying to reconfigure source maps related configs in webpack. Previous configs were

devtool: isEnvProduction
  ? shouldUseSourceMap
    ? 'source-map'
    : false
  : isEnvDevelopment && 'cheap-module-source-map',
devtoolModuleFilenameTemplate: isEnvProduction
    ? info =>
      path
        .relative(paths.appSrc, info.absoluteResourcePath)
        .replace(/\\/g, '/')
    : isEnvDevelopment &&
      (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),

These configs don't work for my current structure. I have searched the webpack docs and found out there was a plugin SourceMapDevToolPlugin which provides more options to configure source maps.I have tried to fix the problem with that plugin, but again no result.

  new webpack.SourceMapDevToolPlugin({
    filename: 'sourcemaps/[file].map',
    publicPath: paths.appPath, /* resolveApp(`apps/${args.appName}`) */
    fileContext: 'public',
    exclude: ['vendor.js'],
  }),

I have created a config which was stated in the docs ( And for cases when source maps are stored in the upper level directory: ) but it also didn't work for me.

FYI, here is the entry point and output configs for webpack

    entry: paths.appIndexJs, /* resolveModule(resolveApp, `apps/${args.appName}/index`) */
    output: {
      // The build folder.
      path: paths.appBuild,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      assetModuleFilename: 'static/media/[name].[hash][ext]',
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      // devtoolModuleFilenameTemplate: isEnvProduction
      //   ? info =>
      //     path
      //       .relative(paths.appSrc, info.absoluteResourcePath)
      //       .replace(/\\/g, '/')
      //   : isEnvDevelopment &&
      //     (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },