React app compiles with errors if we use absolute imports after adding jsconfig.json

[87sam12]

Describe the bug

Created using create react app, compiles with errors if we use absolute imports after adding jsconfig.json
Module not found: Error: Can't resolve '@/components'

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/src/*": ["src/*"],
      "@/components/*": ["src/components/*"],
    }
  },
  "exclude": ["node_modules"]
}

Did you try recovering your dependencies?

This is irrelevant here I guess.

Which terms did you search for in User Guide?

I just went through vscode jsconfig.json documentation
https://code.visualstudio.com/docs/languages/jsconfig

Environment

Environment Info:

current version of create-react-app: 5.0.0
running from /home/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: Linux 5.13
CPU: (4) x64 Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.17 - ~/.npm-global/bin/yarn
npm: 8.5.3 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: Not Found
Firefox: 96.0
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Generate react app using create-react-app.
2. Add jsconfig.json with required details.
3. Expect to use absolute imports.

Expected behavior

Absolute imports must work

Actual behavior

Absolute imports errors out

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)