Module not found after using paths in tsconfig

After adding two paths to my tsconfig.json like below:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
//other fields
    "baseUrl": "src/",
    "outDir": "src/dist",
//other fields
    "paths": {
      "@components/*": ["core/components/*"],
      "@type/*": ["types/*"]
    }
  }
}

VsCode show me that my import is correct: enter image description here

but react compiler throw me this error:

ERROR in ./src/core/components/Layout/Header/components/Profile.tsx 10:0-44
Module not found: Error: Can't resolve '@components/Avatar' in 'C:\Users\...\Desktop\...\...\app\src\core\components\Layout\Header\components'

Can someone tell me what am I doing wrong?

Thanks for any help!