VSCode chrome debugger for nested create-react-app directory

Question

I am trying to build a project with node and react. Here's my project; it does a little more than hello world, that's it: https://github.com/andrewnessinjim/react-node-kickstarter/tree/so-question

Importing this project into vscode and running docker-compose.yml brings the project up, like so:

I would like to debug the client code in vscode. To do this, I used the settings provided here: https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code and it didn't help. I tweaked the parameters to the following based on my assumptions, because I am using docker compose:

{
            "localRoot": "./client/src",
            "remoteRoot": "/app/client/src",
            "webRoot": "/app/client/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
}

I also tried {"localRoot": "${workspaceFolder}/client/src"}. I also tried the configuration from this answer.

I selected "Chrome Launch" from "Run and Debug" section to open Chrome with the debugger attached and placed a breakpoint at line 38 in App.tsx:

In each case, the breakpoint doesn't bind, indicated by grey circle next to the breakpoint in below screenshot:

I think the configurations need to be tweaked because I have create-react-app in a nested directory. How can I make this work? Please let me know if there's a better way to share this kind of question! I am not sure if it this scenario would work in all environments; it works on Ubuntu.

NOTE: I used launch type pwa-chrome because chrome is now deprecated. VSCode docker extension is required for the above scenario.

EDIT: I tried this in Windows as well and I have the same problem. I just had to fix the line endings in the project using this answer to make the app work in Windows.