Webpack 5 sourcemap loaded by chrome in different "area" - unable to debug - reactjs

Question

I have two react components - I would like to be able to debug the jsx in chrome.
When I load the page I see my component code where I expect (using inline sourcemap)
The sourcemap is loading (it works with a separate source-map file as well as in-line)
But it loads in another section under the "page" menu in chrome.
I see my jsx code as expected here. If I put a breakpoint (say on line 7 in the above picture) it will add the corresponding breakpoint in my minified code. However if I "hit" the breakpoint it will hit in the minified code and not my original jsx (which I thought was possible with sourcemaps in chrome?)
I've used webpack for sourcemaps before - but I don't remember coming across this problem and haven't had any luck searching stackoverflow/google.
Here is my Webpack.Config
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
const webpackEntries = {
SavingsGoalAccount: './src/SavingsGoalAccount.jsx',
SavingsGoalsList: './src/SavingsGoalsList.jsx',
};
module.exports = {
mode: 'production',
entry: webpackEntries,
//devtool: "inline-source-map",
devtool: 'source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[contenthash].js',
library: {
type: 'umd',
name: '[name]',
},
globalObject: 'this',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
},
optimization: {
moduleIds: 'deterministic',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist/**/*')],
}),
new MiniCssExtractPlugin(),
],
};
It outputs in my dist folder as expected:

Answer 1

Since you're using devTool value as source-map. It will load the original code you wrote as source map. This also happened to me and I changed the devTool value to a different one as per my need.
As per webpack documetation - https://webpack.js.org/configuration/devtool/#devtool
if the quality is original then it'll load the entire code:
quality: original- You will see the original code that you wrote, assuming all loaders support SourceMapping.
If you don't need it. Please go with an option as per your need.