Typescript import aliases not working in VSCode

Question

I'm currently building a NextJS template and trying to configure import aliases.

tsconfig.json aliases-related part:

"baseUrl": "./src",
"paths": {
  "@api/*": ["api/*"],
  "@components/*": ["components/*"],
  "@constants/*": ["constants/*"],
  "@pages/*": ["pages/*"],
  "@store": ["store"],
  "@store/*": ["store/*"],
  "@styles/*": ["styles/*"],
  "@util/*": ["util/*"]
}

Folder structure:

The problem: VSCode alias importing not working properly.

E.g. in _app.tsx, alias import for Redux store is working properly:

1. Problem: alias import for exported type State from Navigation.slice.ts is not working.

Exported type:

VSCode import in Navigation.selectors.ts:

Also here it can be seen that exported constant RootState from src/store/reducer.ts is working properly. The fact that alias import sometimes works and sometimes doesn't is really confusing.

2. Problem: Import for exported constant navigationReducer from Navigation.slice.ts inside reducer.ts not working at all.

Exported constant navigationReducer:

VSCode import in reducer.ts not working at all:

Any help is greatly appreciated!