Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2

I just ran into this and I think I have it working for myself. Using the .script command of the Debugger for Chrome extension, I saw the below output.

› http://localhost:3000/static/js/0.chunk.js (/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/static/js/0.chunk.js)
    - /home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js (/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js)

It seems it doesn't append your webroot to the inferred local path. But using ${webRoot}/* also doesn't work for some reason. Doing so leads to your path repeating twice like the below result.

/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js

But manually writing out "/__vscode-remote-uri__/*" seems to get round the above duplicate path problem.

This is my working configuration of launch.json:

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