MetaMask – How to Connect Mobile Browser via WalletConnect Web3Modal V2 Without Prompt

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { Web3Modal } from "@web3modal/react";

const chains = [mainnet];

const { provider, webSocketProvider } = configureChains(chains, [
    walletConnectProvider({
      projectId: "projectid",
    }),
  ]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
      projectId: "projectId",
      version: "2",
      appName: "Test App",
      chains,

    }),
    provider,
    webSocketProvider,
  });

  const ethereumClient = new EthereumClient(wagmiClient, chains);
  
  return (
  <>
  <WagmiConfig client={wagmiClient}>
<Routes>
  <Route path="/testing" element={<Testing />} />
</Routes>      
  </WagmiConfig>
  <Web3Modal
       projectId="projectId"
       ethereumClient={ethereumClient}
       themeZIndex={1350}
    />
 </>
  )

And in testing component i m using web3button like this

import {  Web3Button } from "@web3modal/react";
return (
<Web3Button balance="show" />
 )

when i press this button in mobile browser it prompts to open metamask as select and go in nothing happens no prompt for connect or anything.
What to do to make it work in mobile browsers ?

Works all good in desktop browser.