WalletConnect error while integration in ReactJS - Uncaught (in promise) TypeError: this.send is not a function

I'm integrating WalletConnect in React DApp but getting this.send is not a function error.

I've identified that the issue is with WalletConnectProvider but i've followed the same steps that are mentioned in their documentation.

Please review my code and let me know how to fix this issue. Thanks.

import WalletConnectProvider from '@walletconnect/web3-provider';
import config from './config';
import Web3 from 'web3';

export const walletConnect = async (setAddr) => {
//  Create WalletConnect Provider
const provider = new WalletConnectProvider({
    infuraId: config.tokenContract.infuraKey, // Required
});

//  Enable session (triggers QR Code modal)
await provider.enable();

console.log('provider', provider);
if (provider.connected) {
    console.log('wallet connect address', provider.accounts[0]);
    setAddr(provider.accounts[0]);
}

//  Create Web3
const web3 = new Web3(provider);
console.log('web3', web3);

const _contract = new web3.eth.Contract(
   config.tokenContract.contractABI,
   config.tokenContract.contractAddress
);
const data = await _contract.methods.hatchNest().encodeABI();
const gasPrice = 20000000000;
const gasLimit = 90000;

const tx = {
   from: '0xFF12586A1eCf65b56d828712A8d4B48D1CEC8962',
   to: config.tokenContract.contractAddress,
   data: data,
   gasPrice: web3.utils.toHex(gasPrice),
   gasLimit: web3.utils.toHex(gasLimit),
};
 // Send Transaction
 const txHash = await web3.eth.sendTransaction(tx);
 console.log('sendTransaction', txHash);
};