Unhandled Rejection (TypeError): Object(...) is not a function, getItem

Question

I am getting this error in two different apps. One of uses wagmi/walletconnect and the other one wallet connect sign API. I am guessing both have common script files.

Both apps have some common properties. Node version 16.17.0 I install the packages with --legacy-peer-deps flag

import SignClient from "@walletconnect/sign-client";
import { walletConnectProjectID } from "../constants/env";
import React, { useCallback, useContext, useEffect, useState } from "react";
import { WalletConnectModal } from "@walletconnect/modal";

function useWeb3() {
  const [modal, setModal] = useState(undefined);
  const [signClient, setSignClient] = useState(undefined);

  const getWeb3 = async () => {
    if (!signClient && !modal) {
      const signClient = await SignClient.init({
        projectId: walletConnectProjectID,
        metadata: {
          name: "Example Dapp",
          description: "Example Dapp",
          url: "#",
          icons: ["https://walletconnect.com/walletconnect-logo.png"],
        },
      });

      const modal = new WalletConnectModal({
        projectId: walletConnectProjectID,
        standaloneChains: ["eip155:1"],
      });

      // signClient.on("session_event", ({ event }) => {
      //   // Handle session events, such as "chainChanged", "accountsChanged", etc.
      // });

      // signClient.on("session_update", ({ topic, params }) => {
      //   const { namespaces } = params;
      //   const _session = signClient.session.get(topic);
      //   // Overwrite the `namespaces` of the existing session with the incoming one.
      //   const updatedSession = { ..._session, namespaces };
      //   // Integrate the updated session state into your dapp state.
      //   // onSessionUpdate(updatedSession);
      // });

      // signClient.on("session_delete", () => {
      //   // Session was deleted -> reset the dapp state, clean up from user session, etc.
      // });
      const { uri, approval } = await signClient.connect({
        // Optionally: pass a known prior pairing (e.g. from `signClient.core.pairing.getPairings()`) to skip the `uri` step.
        // pairingTopic: pairing?.topic,
        // Provide the namespaces and chains (e.g. `eip155` for EVM-based chains) we want to use in this session.
        requiredNamespaces: {
          eip155: {
            methods: [
              "eth_sendTransaction",
              "eth_signTransaction",
              "eth_sign",
              "personal_sign",
              "eth_signTypedData",
            ],
            chains: ["eip155:1"],
            events: ["chainChanged", "accountsChanged"],
          },
        },
      });
      setModal(modal);
      setSignClient(signClient);
    }
  };

  return [signClient, modal, getWeb3];
}

export default useWeb3;

I tried to set the modal and signClient in useEffect also tried removing it and calling the function from another script to make the async call. But as soon as this function is called I get the error. Origin of the error seems to be this function here:

getItem: function getItem(key) {
  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  key = normalizeKey(key);

  var _getMount2 = _getMount8(key),
      relativeKey = _getMount2.relativeKey,
      driver = _getMount2.driver;

  return asyncCall(driver.getItem, relativeKey, opts).then(function (value) {
    return destr(value);
  });
},

What could be the cause of this error? I am guessing this is happening because package versions of rest of the app isn't compatible with the new packages I added. Maybe webpack/loader versions cannot work with newer scripts. (I don't have much knowdlege about these). Please let me know if you have any suggestions or require more information to understand it.

package.json:

{
  "name": "mgl",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/charts": "^1.2.14",
    "@ant-design/icons": "^4.7.0",
    "@craco/craco": "^6.4.0",
    "@tanstack/react-query": "^5.22.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@walletconnect/modal": "^2.6.2",
    "@web3modal/wagmi1": "^4.0.0-544a28f1",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "bip39": "^3.0.4",
    "concurrently": "^8.2.0",
    "country-data": "0.0.31",
    "country-list": "^2.2.0",
    "detect-emoji-support": "^0.1.7",
    "firebase": "^9.5.0",
    "framer-motion": "^4.1.17",
    "history": "^5.1.0",
    "i18next": "^21.5.2",
    "install": "^0.13.0",
    "npm": "^10.4.0",
    "qrcode.react": "^1.0.1",
    "rc-animate": "^3.1.1",
    "rc-scroll-anim": "^2.7.6",
    "rc-tween-one": "^3.0.3",
    "react": "^17.0.2",
    "react-country-flag": "^2.3.1",
    "react-crypto-icons": "^1.0.5",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.14.3",
    "react-icons": "^4.3.1",
    "react-loading": "^2.0.3",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "recharts": "^2.1.6",
    "viem": "^2.7.12",
    "wagmi": "^2.5.7",
    "web-vitals": "^1.0.1",
    "web3": "^1.6.1"
  },
  "scripts": {
    "client": "craco start",
    "server": "cd backend & npm start",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }
}

craco.config.js:

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};