Unable to debug client javascript-unbound breakpoint

VSCode shows unbound breakpoint in all of my client scripts but I can debug the server-side nodejs code. All of my client app script is written in javascript, no external libraries were used. My launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Client",
            "request": "launch",
            "type": "pwa-chrome",
            "disableNetworkCache": true,
            "cleanUp": "onlyTab",
            "url": "http://localhost:3000",
            
            "webRoot": "${workspaceFolder}",
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Server",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/server.js"
        }
    ],
    "compounds": [
        {
            "name": "All",
            "configurations": ["Server", "Client"]
        }
    ]
}

vscode details on MacOs Monterey:

Version: 1.63.2 (Universal)
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-15T09:37:28.172Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.2.0

Any idea what I missing here? Thanks.