wallet-connect importKey error when uploaded to test server, but local server it works fine

Question

I was trying out wallet-connect for my nft market place app . i have mostly everything set up from my end . Just that my wallet-connect works perfectly in local but when i push it to test server it gives me this error :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'importKey')

error screenshot - https://prnt.sc/XekCJcpHAjC0

web3 version : 1.3.6 web3modal : 1.9.7 @walletconnect/web3-provider : 1.4.1

here is my code for connection stuff :

const web3Modal = 
        new Web3Modal({
            cacheProvider: true,
            providerOptions: {
                injected : {
                },
                walletconnect: {
                    package: WalletConnectProvider,
                    options: {
                        infuraId: process.env.REACT_APP_INFURA_ID,
                        rpc:{
                            1:"https://mainnet.infura.io/v3/" + process.env.REACT_APP_INFURA_ID,
                            4: "https://rinkeby.infura.io/v3/" + process.env.REACT_APP_INFURA_ID,
                            137: "https://polygon-mainnet.infura.io/v3/" + process.env.REACT_APP_INFURA_ID,
                            80001: "https://matic-mumbai.chainstacklabs.com",
                        }
                    },
                },
            },
        });


  
    const connect = useCallback(async () => {
        
        try {
            const rawProvider = await web3Modal.connect();
            _initListeners(rawProvider);
            const connectedProvider = new Web3Provider(rawProvider, "any");
            const chainId = await connectedProvider.getNetwork().then(network => Number(network.chainId));
            const connectedAddress = await connectedProvider.getSigner().getAddress();
            const networkName = await connectedProvider.getNetwork().then(network => String(network.name))
            if( chainId !== null  ) {
                const web3 = new Web3(Web3.givenProvider);
                console.log(Web3.givenProvider)
                const userBalance = await web3.eth.getBalance(connectedAddress) / Math.pow(10,18);
                setBalance(userBalance);
            }
            setAddress(connectedAddress);
            setProviderChainID(chainId);
            setSymbol(getSymbol(chainId));     
            setChainID(chainId); 
            setNetworkName(networkName);      
            setProvider(connectedProvider);    
            setConnected(true);
            return connectedProvider;

        } catch(error) {
            console.log(error);
        }
  
    }, [provider, web3Modal, connected]);

I am using infura and web3