I can’t seem to get the walletProvider instance as it is undefined initially. Only after i connect with the wallet it is defined which is useless because i need it to sign the message with the wallet afterwards. This is the implementation I have so far according to the documentation:https://docs.walletconnect.com/web3modal/react/hooks

 const { walletProvider } = useWeb3ModalProvider()


   const loginWithWallet = async() => {
    try {
        // Open the wallet
        await open();
        console.log("wallet provider", walletProvider)
        if (!walletProvider) {
            throw new Error('Wallet provider not found');
        }
        
        // Get signer from the wallet provider
        const ethersProvider = new BrowserProvider(walletProvider);
        const signer = ethersProvider.getSigner();

        // The message to be signed
        const message = `Sign this message to authenticate: ${Date.now()}`;
        
        // Signing the message
        const signature = await signer.signMessage(message);
        console.log('Signature:', signature);

        // Handle wallet login on the backend
        await UserAPI.handleWalletLogin(address, message, signature);

        // Update wallet address in the frontend state
        setWalletAddress(address);

        // Example: you can fetch user data with the address if you have a backend integration
        // setUser(fetchUserData(address)); 
    } catch (error) {
        console.error("Something happened:", error);
    }
  };

can someone please tell me what I’m doing wrong?