warning " > react-top-loading-bar@2.1.0" has incorrect peer dependency "react@^16 || ^17".

and this error also:

warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

I am not getting what to do actually but I am attaching my package.json file here...

{
  "name": "coderzsales",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "crypto-js": "^4.1.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.3.3",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "react-toastify": "^9.0.1",
    "react-top-loading-bar": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

I think that I have to make some changes in package.json file but, have no idea what will happen to app after making changes! I have no that much experience!