@types/react@18 breaks "everything"

[Jeniczech]

Hello there, I was hoping if someone could help me out of my misery. Even tough I am using the 16.9.19 version, all of the sudden all my projects stopped working after removing node modules, the lock file and running yarn install. I am getting all sort of errors that have never appeared before. Those errors are mainly coming from 3rd party libraries such as 'react-inlinesvg', 'react-datetime' or 'google-map-react', but also from my custom components. Just to show a few:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: Props | Readonly<Props>): googleMapReact', gave the following error...

TS2786: 'SVG' cannot be used as a JSX component.

TS2786: 'DatePicker' cannot be used as a JSX component.

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.

TS2786: 'C' cannot be used as a JSX component.   Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.

Here's my package.json:

"dependencies": {
    "@types/file-saver": "^2.0.1",
    "@types/html2canvas": "^0.0.36",
    "@types/i18next": "^13.0.0",
    "@types/lodash": "^4.14.161",
    "@types/moment": "^2.13.0",
    "@types/react-i18next": "^8.1.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "autoprefixer": "^9.8.5",
    "bootstrap": "4.4.1",
    "core-js": "^3.6.4",
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "html-to-image": "^1.7.0",
    "i18next": "^19.6.2",
    "lodash": "^4.17.20",
    "moment": "^2.27.0",
    "react": "^16.12.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-datetime": "^3.0.4",
    "react-dom": "^16.12.0",
    "react-i18next": "^11.7.0",
    "react-inlinesvg": "^2.0.1",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "regenerator-runtime": "^0.13.3",
    "xlsx": "^0.16.8"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/react": "^16.9.19",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "^16.9.5",
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^4.0.0",
    "css-loader": "^3.4.2",
    "eslint": "^7.5.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.20.4",
    "eslint-plugin-react-hooks": "^4.0.8",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.1.3",
    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

and tsconfig:

{
  "compilerOptions": {
    "outDir": "dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "./*": ["src/*", "src/*/index"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"
  ]
}

Please, does anyone have an idea, what may be the problem? Thanks.