Somehow my React imports using React 18 with TS are always greyed out. I know that you usually don't have to import React any more for writing JSX, but if I don't import it, it literally marks all JSX red and logs "'React' must be in scope when using JSX".

Now the code does not get marked but the browser still throws the same error for each TSX element:

package.json:

{
  "name": "ts-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "axios": "^0.26.1",
    "framer-motion": "^6.2.8",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.0.23"
  }
}

What I've tried:

• added react/jsx-runtime as a plugin to my eslintrc extends

Any ideas of what could be wrong there?