Debugging create react app in vscode with attach configurations

I want to debug my react app in VSCode, Setting up a launch.json with chrome "launch" configuration is easy and working, but if I set up the launch.json with "attach" configuration it won't work.

"configurations": [
{
  "name": "Attach to Chrome",
  "port": 9222,
  "request": "attach",
  "type": "pwa-chrome",
  "urlFilter": "http://localhost:3000/*",
  "webRoot": "${workspaceFolder}"
}

]

I have already added this: --remote-debugging-port=9222 -- "%1" to my chrome properties and yet I still get an error from vscode that there is no debuggable target found on that port.

I just want to debug my app without re-launching a new chrome and or losing my states or progress in the browser.