Freshly generated Vite React TS template code shows errors in VSC but still runs

I've been trying to fix this for a year but no luck so far.

This is a freshly generated project using npm creat vite@latest and the template I chose was React with Typescript. No modification has been made. Yet the editor always shows a bunch of errors like this while the code still works just fine.

The same thing happens with the code generated with npx react-native init. It seems to be a problem with only TSX, not Typescript in general as Elysia with Bun JS still behaves as expected.

Globally installed TS version is 5.5.2. Workspace version is 5.5.4. Tried switching between the 2 but no difference.

Here's my settings.json if you guys need it:

{
    "tabnine.experimentalAutoImports": true,
    "files.autoSave": "afterDelay",
    "workbench.startupEditor": "none",
    "[python]": {
        "editor.formatOnType": true
    },
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "git.mergeEditor": true,
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "git.confirmSync": false,
    "editor.minimap.enabled": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "prettier.jsxSingleQuote": true,
    "prettier.useTabs": true,
    "prettier.trailingComma": "all",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.inlineSuggest.enabled": true,
    "github.copilot.enable": {
        "*": true,
        "plaintext": true,
        "markdown": true,
        "scminput": false
    },
    "workbench.editorAssociations": {
        "*.csv": "gc-excelviewer-csv-editor"
    },
    "workbench.colorTheme": "Visual Studio Dark",
    "prettier.singleAttributePerLine": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "diffEditor.ignoreTrimWhitespace": true,
    "omnisharp.monoPath": "/Library/Frameworks/Mono.framework/Versions/Current",
    "telemetry.telemetryLevel": "off",
    "peacock.favoriteColors": [
        {
            "name": "Angular Red",
            "value": "#dd0531"
        },
        {
            "name": "Azure Blue",
            "value": "#007fff"
        },
        {
            "name": "JavaScript Yellow",
            "value": "#f9e64f"
        },
        {
            "name": "Mandalorian Blue",
            "value": "#1857a4"
        },
        {
            "name": "Node Green",
            "value": "#215732"
        },
        {
            "name": "React Blue",
            "value": "#61dafb"
        },
        {
            "name": "Something Different",
            "value": "#832561"
        },
        {
            "name": "Svelte Orange",
            "value": "#ff3d00"
        },
        {
            "name": "Vue Green",
            "value": "#42b883"
        }
    ],
    "typescript.updateImportsOnFileMove.enabled": "always",
    "workbench.productIconTheme": "fluent-icons",
    "window.zoomLevel": 1,
    "security.workspace.trust.untrustedFiles": "open",
    "github.copilot.editor.enableAutoCompletions": true,
    "update.showReleaseNotes": false,
    "typescript.disableAutomaticTypeAcquisition": true,
    "typescript.experimental.updateImportsOnPaste": true,
    "javascript.showUnused": false,
}

I'm feeling really stupid. Literally 5 minutes after posting the question, I found the answer. But just to be sure, I did some more testing to see if it's the solution and it is.

So essentially, VSC mistook *.tsx with *.ts files so it was treating the TSX code like it were just TS.

I configured the language to be associated with *.tsx extension to be TypeScript JSX and it fixed the problem.