VSCode Import Autocomplete Purgatory (Relative, absolute, and barrel paths)

I hope I'm missing some easy setting, otherwise this UI seems pretty terrible. Why does the autocomplete path for barrel imports not show up on autocomplete? Manually typing out import {Avatar} from '@components works and does not cause issues in the code, so this is certainly a VSCode setting of some sort
// src/app/_components/index.tsx
import Avatar from "./Avatar";
export {Avatar}
// src/app/_components/index.tsx
import Avatar from "./Avatar";
export {Avatar}
//tsconfig.json >> switching the order doesn't change anything
"paths": {
"@/components": ["./src/app/_components"],
"@/components/*": ["./src/app/_components/*"],

"~/*": ["./src/*"],
}
//tsconfig.json >> switching the order doesn't change anything
"paths": {
"@/components": ["./src/app/_components"],
"@/components/*": ["./src/app/_components/*"],

"~/*": ["./src/*"],
}
//.vscode/settings.json
{
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.importModuleSpecifier": "non-relative"
}
//.vscode/settings.json
{
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.importModuleSpecifier": "non-relative"
}
Bonus points if you know how to get autocomplete to show both the relative and absolute import paths, but that's been a years-long struggle so I'll be happy to just get barrels to work.
No description