Debugging Javascript in VS Code - unbound breakpoints

I have some issues with unbound breakpoints in VS Code. My project structure is as follows:

mittfast2 - Project root
  |_webapp
    |_.vscode
      |_launch.json
    |_src
      |_java
      |_resources
      |_webapp - React components etc.
        |_index.js
  |_node_modules
  |_package.json

My package.json has the following scripts:

"scripts": {
    "start": "webpack serve --mode development",
    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js",
    "build": "webpack --mode production",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch --coverage"
}

I run with "npm start" and visit http://localhost:3000. Inspecting the sources gives me this:

I can successfully use the built in debugger in Chrome by adding and hitting breakpoints.

But when I add breakpoints in IntelliJ and run my debug launcher, they are all "Unbound breakpoint". This is my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "WSL Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

I believe something is wrong with my launch.json, specifically when I map my sources.

This is my webpack.config.js in case it is of interest:

const path = require('path')

/* Utilities */
const webpackHtml = require('html-webpack-plugin')
const webpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: ['./src/main/webapp/index'],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    'eslint-loader',
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
                test: /\.(s*)css$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]?[hash:8]',
                }
            }
        ]
    },
    plugins: [
        new webpackHtml({
            hash: true,
            template: './src/main/webapp/index.html',
            filename: 'index.html'
        }),
        new webpackBundleAnalyzer({
            openAnalyzer: false
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css'
        })
    ],
    devServer: {
        port: 3000,
        hot: true,
        historyApiFallback: true,
        proxy: {
            '/resources/*': {
                target: 'http://localhost:8080/fenix/',
                secure: false,
                onError: error => { console.log('::PROXY ERROR::', error) }
            }
        }
    },
    resolve: {
        alias: {
            '@actions': path.resolve(__dirname, 'src/main/webapp/actions'),
            '@components': path.resolve(__dirname, 'src/main/webapp/components'),
            '@gui': path.resolve(__dirname, 'src/main/webapp/gui'),
            '@functions': path.resolve(__dirname, 'src/main/webapp/functions'),
            '@middleware': path.resolve(__dirname, 'src/main/webapp/middleware'),
            '@reducers': path.resolve(__dirname, 'src/main/webapp/reducers'),
            '@styles': path.resolve(__dirname, 'src/main/webapp/styles'),
        }
    }
}

Given my project structure, can anyone see why my launch.json is incorrect and suggest improvements to successfully bind the breakpoints?

I hope this question contains all the information needed. Otherwise, please suggest improvements and I will happily edit the question.

Thanks!