Javascript – Path alias for vite + typescript + react not working

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src'),
        },
    },
})

tsconfig.json

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

App.tsx

import './App.css';
import { cn } from '@/lib/utils';

function App() {
  return (
    <>
      <h1 className={cn('bg-slate-50 p-3 text-3xl font-bold underline', true ? 'bg-red-500' : 'bg-blue-500')}>
        Hello world!
      </h1>
    </>
  );
}

export default App;

I have this same config in another project that works but here, my project is working fine but vscode IDE is giving an error
Cannot find module '@/lib/utils' or its corresponding type declarations.ts(2307)

• Tried restarting ts server
• tried different changing the path