react#18.2.0 Could not resolve dependency - node.js

Question

I am new in React and trying to build new website using react and material ui, However, I am getting below error when trying to update/install packages from package.json
My npm version : 8.19.3
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-chartjs-2#3.0.4
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#">=16.8.0" from #emotion/react#11.9.3
npm ERR! node_modules/#emotion/react
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.9.3
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.8.6
npm ERR! node_modules/#mui/material
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.8.4
npm ERR! node_modules/#mui/icons-material
npm ERR! 1 more (the root project)
npm ERR! 4 more (#mui/styled-engine, #mui/system, #mui/styled-engine, the root project)
npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.8.6
npm ERR! node_modules/#mui/material
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.8.4
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"5.8.4" from the root project
npm ERR! 1 more (the root project)
npm ERR! 4 more (#mui/styled-engine, #mui/system, #mui/styled-engine, the root project)
npm ERR! peer react#">=16.8.0" from #emotion/styled#11.9.3
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.8.6
npm ERR! node_modules/#mui/material
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.8.4
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"5.8.4" from the root project
npm ERR! 1 more (the root project)
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/styled-engine#5.8.0
npm ERR! node_modules/#mui/styled-engine
npm ERR! #mui/styled-engine#"5.8.0" from the root project
npm ERR! 3 more (#mui/system, #mui/styled-engine, the root project)
npm ERR! 18 more (#mui/base, #mui/icons-material, #mui/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from react-chartjs-2#3.0.4
npm ERR! node_modules/react-chartjs-2
npm ERR! react-chartjs-2#"3.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from react-chartjs-2#3.0.4
npm ERR! node_modules/react-chartjs-2
npm ERR! react-chartjs-2#"3.0.4" 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.
npm ERR!
npm ERR! See C:\Users\Admin\AppData\Local\npm-cache\eresolve-report.txt for a full report. </pre> My Package.json
{
"name": "react-ui",
"version": "4.0.0",
"author": "",
"license": "",
"description": "",
"engines": {
"node": "14 || 15 || 16",
"npm": ">=6"
},
"dependencies": {
"#emotion/cache": "11.9.3",
"#emotion/react": "11.9.3",
"#emotion/styled": "11.9.3",
"#mui/icons-material": "5.8.4",
"#mui/material": "5.8.6",
"#mui/styled-engine": "5.8.0",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "13.3.0",
"#testing-library/user-event": "14.2.1",
"chart.js": "3.4.1",
"chroma-js": "2.4.2",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-chartjs-2": "3.0.4",
"react-countup": "6.3.0",
"react-dom": "18.2.0",
"react-flatpickr": "3.10.13",
"react-router": "^6.8.0",
"react-router-dom": "6.3.0",
"react-scripts": "5.0.1",
"socket.io": "^4.5.4",
"socket.io-client": "^4.5.4",
"stylis": "4.1.1",
"stylis-plugin-rtl": "2.1.1",
"uuid": "8.3.2",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm
start",
"install:peer-deps": "npm install --legacy-peer-deps"
},
"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": {
"eslint": "8.18.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"prettier": "2.7.1"
}
}
`