npm install is giving us a Dependency Tree Error - reactjs

Question

i made a commit to a repo today and when we tried to start the server it gave an error from react.script named "Type Error: chalk.constructor is not a constructor" as a fix we tried to delete lock files (we had both yarn and npm lock) and delete node modules files, and after an npm install after that, it gave us this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts#3.4.1
npm ERR! Found: typescript#4.0.8
npm ERR! node_modules/typescript
npm ERR! typescript#"~4.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript#"^3.2.1" from react-scripts#3.4.1
npm ERR! node_modules/react-scripts
npm ERR!
npm ERR! Conflicting peer dependency: typescript#3.9.10
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript#"^3.2.1" from react-scripts#3.4.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"3.4.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!
npm ERR! See *** for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! ***
PS *** npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts#3.4.1
npm ERR! Found: typescript#4.0.8
npm ERR! node_modules/typescript
npm ERR! typescript#"~4.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript#"^3.2.1" from react-scripts#3.4.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"3.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript#3.9.10
npm ERR! peerOptional typescript#"^3.2.1" from react-scripts#3.4.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"3.4.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!
npm ERR! See *** for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! ***
I censored the paths for privacy purposes. But after that i changed typescript package version to typescript#"^3.2.1" and it still didn't work, after that i used the "npm install --save --legacy-peer-deps" command and it still didn't work. Can anyone please offer any advice?
Update: The package.json is below
{
"name": "company-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/styles": "^4.10.0",
"#react-pdf/renderer": "2.0.0-beta.6",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#tinymce/tinymce-react": "^3.6.1",
"#types/file-saver": "^2.0.1",
"#types/html2canvas": "^0.0.35",
"#types/jest": "^24.0.0",
"#types/jspdf": "^1.3.3",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-color": "^3.0.4",
"#types/react-dom": "^16.9.0",
"#types/react-notifications-component": "^2.4.0",
"#types/react-redux": "^7.1.9",
"#types/react-router-dom": "^5.1.5",
"#types/react-text-mask": "^5.4.6",
"#types/react-virtualized": "^9.21.10",
"#types/uuid": "^8.3.0",
"#types/yup": "^0.29.3",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"computed-style-to-inline-style": "^3.0.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"fontsource-roboto": "3.0.3",
"formik": "^2.1.5",
"fs": "^0.0.1-security",
"html-to-image": "^1.6.1",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"js-file-download": "^0.4.12",
"jspdf": "^1.5.3",
"moment": "^2.27.0",
"popper.js": "^1.16.1",
"potrace": "^2.1.6",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-bootstrap-sweetalert": "^5.2.0",
"react-color": "^2.18.1",
"react-credit-card-input": "^1.1.5",
"react-dom": "^16.13.1",
"react-material-ui-carousel": "^2.0.0",
"react-notifications-component": "^2.4.0",
"react-player": "^2.4.0",
"react-recaptcha": "^2.3.10",
"react-redux": "^7.2.0",
"react-responsive-carousel": "^3.2.9",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.3.1",
"react-scripts": "3.4.1",
"react-text-mask": "^5.4.3",
"react-virtualized": "^9.22.2",
"redux-thunk": "^2.3.0",
"styled-components": "^5.2.0",
"sweetalert2": "^11.1.0",
"typescript": "~4.0.2",
"uuid": "^8.3.0",
"xlsx": "^0.17.0",
"yup": "^0.29.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prod": "serve -s build -l 3000",
"build-run-prod": "react-scripts build && serve -s build -l 3000"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}