Why did it show error when I installed package "react-modal"?
Summary:
Steps to reproduce:
Following the steps, I 1)Create a New project folder in my case, I created reactdemo 2)in the new project folder, install the latest reactJS: npx create-react-app support 3) the installation was successful. with ReactJS Version 17.0.1 4)then I tried to install react-modal: d:\reactdemo\support: npm install react-modal it was still unsuccessful.
Here attached photo is my error screenshot. My npm version is 7.0.8. Could anyone know how to solve this issue?
Expected behavior:
package "react-modal" is installed
Link to example of issue:

The error you are seeing:
npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"17.x" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16" from [email protected] npm ERR! node_modules/react-modal npm ERR! react-modal@"3.x" from the root project
is because the latest version of this library on NPM does not list React 17 as an accepted peer dependency. It looks like this has been added a few days ago in the repository (029a52500d25c07df06a2b4e32ef93ff0dfd70d7), so just waiting on the next release. In the meantime you'll have to downgrade your project to React 16 (e.g. npm install --save react@16) to use this library (or as the error suggests, you could use --force, but that's not a good habit to be in).
(I'm including the error message above in text form rather than a screenshot to aid future searchers. @YimingJin when reporting errors to any repository please paste the output as text rather than using screenshots for this reason)
@davidje13 @YimingJin v3.12.1 has been release. Please check if it fixes this issue. Thanks!
`% npm install --save react-modal npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! peer react@"^18.0.0" from @testing-library/[email protected] npm ERR! node_modules/@testing-library/react npm ERR! @testing-library/react@"^13.3.0" from the root project npm ERR! peer react@"^18.2.0" from [email protected] npm ERR! node_modules/react-dom npm ERR! peer react-dom@"^18.0.0" from @testing-library/[email protected] npm ERR! node_modules/@testing-library/react npm ERR! @testing-library/react@"^13.3.0" from the root project npm ERR! react-dom@"^18.2.0" from the root project npm ERR! 1 more (react-modal) npm ERR! 3 more (react-scripts, the root project, react-modal) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"16.0.0" from [email protected] npm ERR! node_modules/react-native npm ERR! peer react-native@"^0.51" from [email protected] npm ERR! node_modules/react-native-final-tree-view npm ERR! react-native-final-tree-view@"^3.0.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/react npm ERR! peer react@"16.0.0" from [email protected] npm ERR! node_modules/react-native npm ERR! peer react-native@"^0.51" from [email protected] npm ERR! node_modules/react-native-final-tree-view npm ERR! react-native-final-tree-view@"^3.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 /Users/xxxxxx/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in: npm ERR! /Users/xxxxxx/.npm/_logs/2022-08-16T11_53_36_877Z-debug-0.log`
I am still getting the same error