Type declarations cannot find from absolute component imports in Vite React TypeScript

I'm searching for hours about this (more like search skill issue).

This is a react-ts template from Vite with changes in tsconfig.ts:

"types": ["node"] added because I thought it will solve the typing declaration issue.

"baseUrl" and "paths" for absolute imports.

both the json references in tsconfig.json has no changes.

Here is my tsconfig.json:

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

Lastly this is my configuration for vite.config.ts:

import 

    { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import path from "node:path";
    
    // https://vite.dev/config/
    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "src"),
        },
      },
    });

After moving the the compiler options specifically the baseUrl and paths in tsconfig.app.json, the module reference not found in TypeScript is now resolved.

It should be obvious to either add compiler options in tsconfig..json since in the initialization of a Vite react-ts app, the tsconfig.json doesn't have any compilerOptions but instead references the other two tsconfigs.

tsconfig.json:

    {
      "files": [],
      "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
      ]
    }

tsconfig.app.json:

    {
      "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,
    
        "baseUrl": "./",
        "paths": {
          "@/*": ["./src/*"]
        },
    
        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",
    
        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true
      },
      "include": ["src"]
    }

the vite.config.ts remains the same as above.