struggling to integrate walletconnect in my dApp

Question

import React, { createContext, useState, useEffect } from 'react';
import Web3Modal from 'web3modal';
import { ethers } from 'ethers';
import { Web3Provider } from "@ethersproject/providers";
import Exchange_abi from '../abis/Exchange_abi.json';
import WalletConnectProvider from "@walletconnect/web3-provider";

const providerOptions = {
    walletlink: {
        options: {
            appName: "Web3 Modal",
            infuraId: process.env.REACT_APP_INFURA_ID
        }
    },
    walletconnect: {
        package: WalletConnectProvider,
        options: {
            infuraId: process.env.REACT_APP_INFURA_ID,
            rpc: {
                1: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_ID}`, // Mainnet
            },
        },
    },

};



    async function connectWallet() {
        try {
            const web3Modal = new Web3Modal({
                cacheProvider: true,
                providerOptions,
            });
            const web3ModalInstance = await web3Modal.connect();
            const web3ModalProvider = new Web3Provider(web3ModalInstance);
            const signer = web3ModalProvider.getSigner();
            const Contract = new ethers.Contract(contractAddress, Exchange_abi, signer);
            setContract(Contract);
            setProvider(web3ModalProvider);
            setSigner(signer);
            setConnected(true);
            await getBalance(signer, web3ModalProvider);

            const [rateValue, priceValue, supply, ethercost] = await Promise.all([
                getRate(Contract),
                getPrice(Contract),
                getTotalSupply(Contract),
                getEtherPrice(Contract)
            ]);

when II get this on my console hit the connect wallet it pops up with two options: metamask and walletconnect. everything works fine with metamask but when I click the walletconnect option I get the qr when I scan it from a wallet nothing happens it doesen't connect.