How to make React + Typescript aliases work in VSCODE?

Question

typescript

Used by webpack 5.
my tsconfig

spoiler

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "sourceMap": true,
        "strict": true,
        "esModuleInterop": true,
        "resolveJsonModule": true
    },
    "baseUrl": "src",
    "paths": {
        "@pages": [
            "pages/*"
        ]
    },
    "include": [
        "src"
    ]
}

snippet from webpack config

spoiler

resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
            '@pages': path.resolve(__dirname, 'src/pages')
        },
    },

the alias itself works, but in VSCODE it's import is highlighted in red and is not automatically imported, how can I fix this?