How to fix Could not resolve dependency: npm ERR - reactjs

Question

Hi on npm install i got this error:
how can i solve it without using --force or --legacy-peer-deps?
i tried to looking for similar problems but all the suggestion is to using the above flags.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #babel/eslint-parser#7.18.2
npm ERR! Found: eslint#5.16.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"^5.16.0" from the root project
npm ERR! peer eslint#"*" from #typescript-eslint/experimental-utils#2.34.0
npm ERR! node_modules/#typescript-eslint/experimental-utils
npm ERR! #typescript-eslint/experimental-utils#"^2.5.0" from eslint-plugin-jest#23.20.0
npm ERR! node_modules/eslint-plugin-jest
npm ERR! dev eslint-plugin-jest#"^23.7.0" from the root
project
npm ERR! 8 more (babel-eslint, eslint-config-prettier, eslint-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
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.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint#8.19.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.5" 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.
this is my package.json file:
{
"name": "ng_starter",
"version": "0.0.1",
"description": "ng_starter",
"private": true,
"scripts": {
"dev": "webpack-cli serve --mode development --env=development --hot",
"mock": "webpack-cli serve --mode development --env=mock --hot",
"prod": "webpack-cli build --mode production --env=production",
"devprod": "webpack-cli build --mode development --env=devprod",
"test": "jest --env=jsdom",
"test-dev": "jest --env=jsdom --watch",
"lint-fix": "eslint --fix --ext .js --ext .jsx src"
},
"dependencies": {
"#babel/eslint-parser": "^7.16.5",
"#reduxjs/toolkit": "^1.7.1",
"axios": "^0.21.1",
"catalogone-ui-components": "1.16.0",
"catalogone-ui-utility": "1.16.0",
"classnames": "2.2.6",
"d3-hierarchy": "^3.1.1",
"i18next": "17.0.3",
"connected-react-router": "^6.9.1",
"lodash": "^4.17.21",
"prop-types": "15.7.2",
"query-string": "^6.10.1",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-redux": "^7.2.6",
"react-redux-i18n": "^1.9.2",
"react-test-renderer": "16.8.6",
"redux-actions": "^2.6.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"validator": "^12.2.0"
},
"devDependencies": {
"#babel/cli": "7.12.10",
"#babel/core": "7.12.10",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/plugin-proposal-decorators": "7.12.12",
"#babel/plugin-proposal-export-default-from": "7.12.1",
"#babel/plugin-proposal-function-bind": "7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
"#babel/plugin-proposal-optional-chaining": "7.12.7",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/preset-env": "7.12.11",
"#babel/preset-react": "^7.16.7",
"#babel/register": "7.12.10",
"#babel/runtime": "^7.12.5",
"babel-eslint": "^10.1.0",
"babel-loader": "8.0.6",
"babel-plugin-istanbul": "5.2.0",
"babel-plugin-module-resolver": "3.2.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "2.1.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jest": "^23.7.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-webpack-plugin": "^3.1.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^4.5.2",
"jest": "^25.1.0",
"mini-css-extract-plugin": "^1.6.2",
"mocker-api": "^2.9.4",
"node-sass": "npm:sass#1.32.8",
"prettier": "1.19.1",
"react-router-dom": "^5.3.0",
"sass-loader": "7.1.0",
"sass-resources-loader": "2.0.1",
"source-map-loader": "^1.1.3",
"style-loader": "0.23.1",
"svg-transform-loader": "^2.0.13",
"url-loader": "2.0.0",
"webpack": "^4.44.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^5.7.3"
}
}
It seems to me like I have babel/eslint-parser#7.18.2
but I'm not totally sure how to solve this