How to solve the TS2786 error in my monorepo project?

I am getting this error

 Type 'import("/Users/User/Desktop/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.  TS2786

From what I find on google, they are saying that it's because of a mismatch type version. I already tried adding resolutions and optional packages, but nothing worked.

I followed their steps but it did not work.

Here is my root package.json

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "@nrwl/react": "12.10.1",
    "@types/aws-lambda": "8.10.101",
    "@types/aws-serverless-express": "3.3.5",
    "@types/howler": "2.2.7",
    "@types/jest": "26.0.24",
    "@types/multer": "1.4.7",
    "@types/react": "17.0.47",
    "@types/react-dom": "17.0.17",
    "@types/react-redux": "7.1.24",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@types/ua-parser-js": "^0.7.36",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.18.0",
    "@typescript-eslint/experimental-utils": "5.18.0",
    "@typescript-eslint/parser": "5.18.0",
    "eslint": "7.32.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-cypress": "2.12.1",
    "eslint-plugin-flowtype": "8.0.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.23.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-testing-library": "5.2.1",
  
  },
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
  },
  "dependencies": {
    "@nestjs/axios": "0.1.0",
    "@nestjs/common": "8.4.7",
    "@nestjs/core": "8.4.7",
    "@nestjs/platform-express": "8.4.7",
    "@nestjs/typeorm": "8.1.4",
    "@reduxjs/toolkit": "1.8.3",
    "react": "17.0.2",
    "react-countdown-hook": "1.1.1",
    "react-dom": "17.0.2",
    "react-i18next": "^11.17.4",
    "react-icons": "4.3.1",
    "react-joyride": "2.3.2",
    "react-player": "2.9.0",
    "react-redux": "7.2.8",
    "react-router-dom": "6.2.2",
    "react-share": "4.4.0",
    "redux": "4.1.2",
  },
  "resolutions": {
    "@types/react": "17.0.47",
    "@types/react-dom": "17.0.17"
  },
  "optionalDependencies": {
    "@types/react": "17.0.47",
    "@types/react-dom": "17.0.17"
  }
}

In my subfolder package.json. The error happen when I update the react-router-dom to v6

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react-router-dom": "6",
    "react-scripts": "4.0.3",
  },
  "scripts": {
    "serve": "react-scripts start",
  },
  "devDependencies": {
    "@types/react-router-dom": "5.3.3",
    "@types/qrcode": "1.4.2",
    "@typescript-eslint/eslint-plugin": "5.3.1",
    "@typescript-eslint/parser": "5.3.1",
    "eslint": "7.32.0",
    "typescript": "4.6.4"
  }
}