when using create-react-app dependencies #testing-library could not resolve - reactjs

Question

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: learn#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" 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\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.
When I used npm start it gives this error:
Compiled with problems:
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 'D:\React\Education\Fetch api\my-learn\src'
I tried with clear cache,
deleting node modules and then again installing them (npm install),
Then changed from package.json to this:
change "react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g. "react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, run npm install.
None of the solutions worked for me. How can I solve this?

Answer 1

From
React JS npm start shows failed to compile web-vitals
Basically run
npm i web-vitals --save-dev
on your terminal and it should work.

Answer 2

You will need to update #testing-library/react to the latest version to use it properly with React 18.
Run the command:
npm i #testing-library/react#13.0.1
Tested on my project where I had the same problem