Why does react-app (in typescript) cannot hot reload upon editing

Question

There are three cases. All occur on Window 10 WSL Ubuntu:

1. I created a new React app with --template typescript this week. After yarn starting, all kinds of editing do not trigger any hot reloading at all.

2. I yarn started an old React app (created with --template typescript) which was created at July 2020. The configs on package.json and tsconfig.json did not revise since their creation, but no hot reloading can be triggered.

   package.json (built on July 2020)

   {
     "name": "00_test",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "@testing-library/jest-dom": "^4.2.4",
       "@testing-library/react": "^9.3.2",
       "@testing-library/user-event": "^7.1.2",
       "@types/jest": "^24.0.0",
       "@types/node": "^12.0.0",
       "@types/react": "^16.9.0",
       "@types/react-dom": "^16.9.0",
       "react": "^16.13.1",
       "react-dom": "^16.13.1",
       "react-scripts": "3.4.1",
       "typescript": "^3.7.2",
       "web-vitals": "^1.1.0"
     },
     "scripts": {
       "start": "PORT=4000 react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     },
     "eslintConfig": {
       "extends": [
         "react-app",
         "react-app/jest"
       ]
     },
     "browserslist": {
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
       ],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
       ]
     }
   }
   

   tsconfig.json (built on July 2020)

   {
     "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": true,
       "jsx": "react-jsx"
     },
     "include": [
       "src"
     ]
   }
   

3. I created a new react-app (with js only) this week, after yarn starting, all kinds of editing do not trigger any hot reloading at all.

Weird thing is, in all 3 cases, NO usual auto-popping a new browser is triggered after Compiled successfully!

I googled a lot but only one not-applicable case (which specified with webpack problem) is found. And react's github page shows no similar issues.

My env change from July 2020 to now:

1. A new ASUS wifi router (AC68U) with complex network config option is used;
2. VS-code is upgraded to v1.53.1 (Jan 2021 ver);
3. Windows 10 is kept upgraded;
4. WSL2 is used instead of WSL1;
5. nvm is added to manage nodejs version