Unable to install FluentUI packages for react app - reactjs

Question

I started learning React and FluentUI 2 hours back. I am trying out various tutorials available over internet but cannot just get through the FluentUI package installation step. I get the below error:
npm i #fluentui/react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: fluent-ui-todo-app#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#">=16.8.0 <17.0.0" from #fluentui/react#7.153.4
npm ERR! node_modules/#fluentui/react
npm ERR! #fluentui/react#"*" 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 ------\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! ------\Local\npm-cache\_logs\2020-12-10T12_41_32_759Z-debug.log
I tried uninstalling react and installing react#16.14.0, but that doesn't help because there are other packages that depend on react#17.0.1. What can I do?
npm install react#16.14.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"16.14.0" from the root project
npm ERR! peer react#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! react-dom#"^17.0.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.
npm ERR!

Answer 1

I had same issue when trying to install fluentui package and after some trial/error loop I found that it works for me with react version 16.8 and I had to change following packages:
"#types/react": "16.8",
"#types/react-dom": "16.8",
"react": "16.8",
"react-dom": "16.8"
Hope this helps, cheers ;)

Answer 2

Microsoft Fluent-ui peer dependencies doesn't support React version 18. You got to wait for the package release or downgrade your application to version 16. Change your package.json.
"#types/react": "16.8",
"#types/react-dom": "16.8",
"react": "16.8",
"react-dom": "16.8"