Uncaught Error: Invalid hook call in React project using Material UI - node.js

Question

I'm getting the following error in my react project:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
react.development.js:1447
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
__webpack_require__
<anonymous>
<anonymous>
The project consists of 2 separate parts, Components and Onboarding. Onboarding uses Components as a dependency.
Inside Components, I have 2 package.json files, one in the root and one in src.
Root package.json:
{
"name": "My Project",
"version": "2.0.0",
"description": "Main React Library",
"main": "dist/index.js",
"module": "dist/index.js",
"bundleDependencies": false,
"deprecated": false,
"license": "MIT",
"private": true,
"sideEffects": false,
"scripts": {
"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files"
},
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.18.10",
"#babel/plugin-syntax-flow": "^7.18.6",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.18.10",
"#babel/preset-flow": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#types/node": "^18.7.15",
"typescript": "^4.8.2",
"reactstrap": "^9.1.4",
"react-quill": "^2.0.0"
},
"dependencies": {}
}
package.json inside src:
{
"name": "My Project",
"version": "2.0.0",
"description": "Main React Library",
"main": "index.js",
"module": "index.js",
"bundleDependencies": false,
"deprecated": false,
"license": "MIT",
"private": true,
"sideEffects": false,
"dependencies": {
"#mui/icons-material": "5.4.1",
"#mui/material": "5.4.1",
"#mui/styled-engine": "5.4.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.2.1",
"axios": "^0.27.2",
"uuid": "^9.0.0",
"bootstrap": "^5.2.0"
}
}
Inside Onboarding, I also have 2 package.json files, one in the root and one in src:
Root package.json:
{
"name": "onboarding-ui",
"description": "",
"version": "0.1.0",
"scripts": {
"start": "sls offline --aws-profile",
"deploy": "sls deploy -s stage --aws-profile",
"test": "sls invoke test"
},
"devDependencies": {
"aws-sdk-mock": "^5.7.0",
"serverless": "^3.21.0",
"serverless-cloudfront-invalidate": "^1.11.0",
"serverless-latest-layer-version": "^2.1.1",
"serverless-mocha-plugin": "^1.12.0",
"serverless-offline": "^6.8.0",
"serverless-prune-plugin": "^1.4.3",
"serverless-s3-sync": "^1.14.4",
"serverless-scriptable-plugin": "^1.0.5"
}
}
package.json inside src:
{
"name": "onboarding",
"version": "0.2.17",
"private": true,
"author": "Me",
"license": "MIT",
"description": "presentation layer.",
"engines": {
"node": "14 || 15 || 16",
"npm": ">=6"
},
"dependencies": {
"#asseinfo/react-kanban": "2.2.0",
"#emotion/cache": "11.7.1",
"#emotion/react": "11.7.1",
"#emotion/styled": "11.6.0",
"#mui/icons-material": "5.4.1",
"#mui/material": "5.4.1",
"#mui/styled-engine": "5.4.1",
"#mui/styles": "^5.9.2",
"#react-jvectormap/core": "1.0.1",
"#react-jvectormap/world": "1.0.0",
"#testing-library/jest-dom": "5.16.2",
"#testing-library/react": "12.1.2",
"#testing-library/user-event": "13.5.0",
"accounted-ui": "../../Components/dist",
"axios": "^0.27.2",
"chart.js": "3.4.1",
"chroma-js": "2.4.2",
"crypto-js": "^4.1.1",
"dropzone": "5.9.2",
"flatpickr": "4.6.9",
"formik": "^2.2.9",
"html-react-parser": "1.4.8",
"i18next": "^21.9.1",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-http-backend": "^1.4.1",
"lodash.debounce": "^4.0.8",
"prop-types": "15.8.1",
"react": "17.0.2",
"react-chartjs-2": "3.0.4",
"react-confetti": "^6.1.0",
"react-csv": "^2.2.2",
"react-debounce-input": "^3.3.0",
"react-dom": "17.0.2",
"react-flatpickr": "3.10.7",
"react-github-btn": "1.2.1",
"react-i18next": "^11.18.5",
"react-images-viewer": "1.7.1",
"react-quill": "1.3.5",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.0",
"react-table": "7.7.0",
"react-toastify": "^9.0.3",
"stylis": "4.0.13",
"uuid": "8.3.2",
"web-vitals": "2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build:dev": "dotenv -e .env.dev react-scripts build",
"build:prod": "dotenv -e .env.prod react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install"
},
"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": {
"accounted-ui": "../../Components/dist", // this is how I'm pulling in the `Components` folder
"dotenv-cli": "^5.1.0",
"eslint": "8.8.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"prettier": "2.5.1"
}
}
The project is using Material UI, which I suspect might also have something to do with this. I tried many suggestions but nothing has worked so far. Would appreciate it if anyone can help with this.