React: Invalid hook call error and Framer Motion issue - reactjs

Question

I am having a "Error: Invalid hook call. " issue after installing and using Framer-Motion. So I followed the debugging strategy from the React.js(https://reactjs.org/warnings/invalid-hook-call-warning.html) docs and the only thing that I see that might be causing this issue is last part before "Other Causes" where it talks about React Router Link.
here is the code to two files that caused this issue. Package.json file from outside the "client" directory (for the server):
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MrDawit/Portafoglio_react.git"
},
"author": "",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/MrDawit/Portafoglio_react/issues"
},
"homepage": "",
"dependencies": {
"#popperjs/core": "^2.9.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.6.0",
"concurrently": "^5.3.0",
"cookie-parser": "^1.4.5",
"core-js": "^3.15.2",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"framer-motion": "^4.1.17",
"googleapis": "^67.0.0",
"if-env": "^1.0.4",
"nodemailer": "^6.4.17",
"nodemon": "^2.0.7",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"run-all": "^1.0.1"
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
And here is the code from the Package.json file inside the "client" directory for React:
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"gh-pages": "^3.1.0",
"http-proxy-middleware": "^1.0.6",
"nodemailer": "^6.4.17",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "set Port=3080 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}

Answer 1

The issue ended up being that Framer Motion was supposed to be in the package.json file that is inside the "client" directory. Since Bootstrap and other similar modules were included in the outer package.json file and they installed correctly, it mislead me thinking that Framer Motion could do the same.
Steps for fixing my issue:
npm uninstall framer-motion
deleting both node_modules(inside and outside the "client" directory) directories
deleting both package-lock.json files
npm install
cd client
npm install framer-motion
Not doing step 5 in the first place was the cause of my error.