Webview debug breakpoints not binding to the source file

Describe the bug
A clear and concise description of what the bug is.
I'm trying to debug my extension webview (react + webpack). Breakpoints are popping up the .js file instead of the actual source file.

Launch config

{
    "name": "WI Extension",
    "type": "extensionHost",
    "request": "launch",
    "env": {
        "WEB_VIEW_DEV_MODE": "true",
        "WEB_VIEW_DEV_HOST": "http://localhost:3000",
    },
    "debugWebviews": true,
    "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/workspaces/wi/wi-extension"
    ],
    "outFiles": [
        "${workspaceFolder}/workspaces/wi/wi-extension/dist/**/*.js",
        "${workspaceFolder}/workspaces/wi/wi-webviews/lib/**/*"
    ],
    "skipFiles": [
        "**/node_modules/**"
    ],
    "rendererDebugOptions": {
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}/workspaces/wi/wi-webviews",
    },
    "preLaunchTask": "npm: watch-wi",
    "envFile": "${workspaceFolder}/workspaces/wi/wi-extension/.env"
}

Webpack config

output: {
        path: path.resolve(__dirname, "lib"),
        filename: "main.js",
        library: "visualizerWebview",
        devtoolModuleFilenameTemplate: function (info) {
            return "file:///" + encodeURI(info.absoluteResourcePath);
        },
        publicPath: "http://localhost:3000/lib/",
    }

VS Code Version: 1.105.1