React 17: better-docs compatible? - reactjs

Question

I tried to install better-docs but received the following error. Seems like the better-docs is not compatible with the react v.17? How do you guys work with JSDoc with React 17? Any advice helps, thank you.
The below is the error report.
.npm/eresolve-report.txt
npm resolution error report
2021-11-22T05:56:23.456Z
While resolving: react-tsx#0.1.0
Found: react#17.0.2
node_modules/react
react#"^17.0.2" from the root project
Could not resolve dependency:
peer react#"^16.0.0" from better-docs#2.3.2
node_modules/better-docs
better-docs#"*" from the root project
Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "17.0.2",
"whileInstalling": {
"name": "react-tsx",
"version": "0.1.0",
"path": "/Users/Projects/salon/react-tsx"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "^16.0.0",
"error": "INVALID",
"from": {
"name": "better-docs",
"version": "2.3.2",
"whileInstalling": {
"name": "react-tsx",
"version": "0.1.0",
"path": "/Users/Projects/salon/react-tsx"
},
"location": "node_modules/better-docs",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "better-docs",
"spec": "*",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
package.json
{
"name": "react-tsx",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.1.1",
"#mui/lab": "^5.0.0-alpha.54",
"#mui/material": "^5.1.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-router-dom": "^5.3.2",
"date-fns": "^2.25.0",
"jsdoc": "^3.6.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "tsc",
"test": "react-scripts test",
"eject": "react-scripts eject",
"docs": "jsdoc -c jsdoc.conf.json"
},
"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": {
"typescript": "^4.4.4"
}
}