Invalid Hooks call in react

Question

I added an npm package called white-web-sdk into my project and started receiving Hooks call issue while using its functions. I did run npm ls react and found 2 versions of react present after I downloaded it: issue

After searching I found out we need to add react to peer dependencies to prevent multiple version of react in the project. I did that to but the issue still remains and white-web-sdk still adds [email protected] and crashes.

Below is my package.json file :

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^2.13.1",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
    "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
    "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@headlessui/react": "^1.4.3",
    "@heroicons/react": "^1.0.6",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.0",
    "@mui/x-date-pickers": "^5.0.0-alpha.0",
    "@reduxjs/toolkit": "^1.8.1",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.36",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.1.24",
    "agora-react-uikit": "^1.0.3",
    "agora-rtc-react": "^1.1.1",
    "agora-rtc-sdk": "^3.6.10",
    "agora-rtc-sdk-ng": "^4.10.2",
    "agora-whiteboard-sdk": "^1.0.4",
    "axios": "^0.26.0",
    "date-fns": "^2.28.0",
    "heroicons": "^1.0.5",
    "heroicons-react": "^1.4.1",
    "history": "^5.2.0",
    "js-cookie": "^3.0.1",
    "jwt-decode": "^3.1.2",
    "net": "^1.0.2",
    "node-sass": "^6.0.1",
    "query-string": "^7.1.1",
    "react-icons": "^4.3.1",
    "react-jitsi": "^1.0.4",
    "react-pdf": "^5.7.2",
    "react-presents": "^0.8.1",
    "react-redux": "^7.2.8",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.0",
    "redux-persist": "^6.0.0",
    "socket.io-client": "^4.1.3",
    "sockjs-client": "^1.6.0",
    "stompjs": "^2.3.3",
    "typescript": "^4.5.2",
    "universal-cookie": "^4.0.4",
    "uuid": "^8.3.2",
    "web-vitals": "^1.1.2",
    "white-web-sdk": "^2.16.15"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "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"
    ]
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.0",
    "@types/js-cookie": "^3.0.1",
    "@types/react-pdf": "^5.0.9",
    "@types/socket.io-client": "^3.0.0",
    "@types/sockjs-client": "^1.5.1",
    "@types/stompjs": "^2.3.5",
    "@types/uuid": "^8.3.4",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "tailwindcss": "^3.0.18"
  }
}