How to debug a typescript create-react-app in visual studio code

Question

Steps to reproduce:

1. Set a breakpoint in any .tsx file

2. run my npm script "start": "react-scripts start",

3. start debugging with F5 or by selecting a configuration from the Run and Debug window in vscode.

Either configuration shown below results in an 'unverified breakpoint' in vscode.

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

I am able to debug normal JavaScript and TypeScript projects in vscode without issue. My guess is that I have to change what 'react-scripts start' is doing, or account for where it's going to make .jsx files and sourcemaps in my launch.json. This is the guide I follow to debug TypeScript in vscode. In particular, this section explains what I believe is happening.

If no source map exists for the original source, or if the source map is broken and cannot successfully map between the source and the generated JavaScript, then breakpoints show up as unverified (gray hollow circles).

tsconfig.json

    {
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false, // I've tried this with both false and true (default value)
        "jsx": "react-jsx",
        "sourceMap": true // I've tried with this both true and false (default value)
      },
      "include": [
        "src"
      ]
    }