Debugging react app with hot-reloading does not work

Steps to reproduce:

1. create new react app: `npx create-react-app my-app`
1. start react app: `export BROWSER=none && yarn start`
1. start debugging in vscode - see `launch.json` below
1. set a breakpoint in App.js file
1. change some code in App.js file, e.g. add a `console.log('foo')`

Result:
After changing anything in App.js file, and the changed code gets hot-reloaded in the dev server, no breakpoint is hit anymore.
Sometimes breakpoints are still hit and code execution stops but at the wrong line in the vscode editor. This usually happens if you remove or add lines of code in a file, where you previously set a breakpoint. It seems as if the debugger still stops at the line where the breakpoint was before adding / removing lines of code.

Expected Result:
all breakpoints should still be working after changing and hot-reloading code

Note:
Debugging works as expected as long as I restart the dev server (`yarn start`) after every code change. But I think that is not the way it was intended to be done?

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": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
```