How to resolve error in eslint-config-airbnb dependencies - node.js

Question

I am trying to deploy my reactjs project on heroku; below is the error I got. I have tried using 'npm install --legacy-peer-deps' but it still doesn't work. I have attached my package.json below. Does anyone have any idea about this?
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: eslint-config-airbnb#18.2.1
npm ERR! Found: eslint#8.20.0
npm ERR! node_modules/eslint
npm ERR! peer eslint#"^7.5.0 || ^8.0.0" from #babel/eslint-parser#7.18.2
npm ERR! node_modules/#babel/eslint-parser
npm ERR! #babel/eslint-parser#"^7.16.3" from eslint-config-react-app#7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.1" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! peer eslint#"^6.0.0 || ^7.0.0 || ^8.0.0" from #typescript-eslint/eslint-plugin#5.30.6
npm ERR! node_modules/#typescript-eslint/eslint-plugin
npm ERR! #typescript-eslint/eslint-plugin#"^5.5.0" from eslint-config-react-app#7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.1" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! peerOptional #typescript-eslint/eslint-plugin#"^4.0.0 || ^5.0.0" from eslint-plugin-jest#25.7.0
npm ERR! node_modules/eslint-plugin-jest
npm ERR! eslint-plugin-jest#"^25.3.0" from eslint-config-react-app#7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.1" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! 16 more (#typescript-eslint/experimental-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#"^5.16.0 || ^6.8.0 || ^7.2.0" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb#"^18.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint#7.32.0
npm ERR! node_modules/eslint
npm ERR! peer eslint#"^5.16.0 || ^6.8.0 || ^7.2.0" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb#"^18.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Below is my package.json, I have the eslint config airbnb in my devDependencies.
package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.58",
"axios": "^0.27.2",
"jwt-decode": "^3.1.2",
"material-ui-chip-input": "^1.1.0",
"moment": "^2.29.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-file-base64": "^1.0.3",
"react-google-login": "^5.2.2",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"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": {
"#redux-devtools/core": "^3.9.0",
"#redux-devtools/dock-monitor": "^1.4.0",
"#redux-devtools/log-monitor": "^2.3.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0"
},
"engines": {
"node": "16.x",
"npm": "8.16.0"
}
}