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"
}
]
}
```

Reproduziere das Problem mit den aufgeführten create-react-app-Schritten, `yarn start`, `App.js` und der bereitgestellten `launch.json`; prüfe zunächst, wie der Firefox VS Code debugger mit per Hot Reload aktualisierten Quellcodeänderungen umgeht. Als erledigt gilt die Aufgabe, wenn Breakpoints aktiv bleiben und nach dem Hinzufügen oder Entfernen von Code an den korrekten Zeilen angehalten wird, ohne den Dev-Server neu zu starten.

Vom Indexierungsmodell aus dem Issue-Text verfasst.