The mobile browser cannot connect to metaMask, it opens the metamask application but after that nothing happens

Web3Button from Web3Modal not connecting to my mobile metmask wallet if i open it in mobile chrome browser

This is my App.js file

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

export default function App() {
  const chains = [bscTestnet];
  const { provider, webSocketProvider } = configureChains(chains, [
    walletConnectProvider({ projectId: "exampletestprojectid" }),
  ]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
      projectId: "exampletestprojectid",
      version: "2",
      appName: "Singh App",
      chains,
    }),
    provider,
  });
  const ethereumClient = new EthereumClient(wagmiClient, chains);



 return (   
     <WagmiConfig client={wagmiClient}
      <Routes>
         <Route path="/testing" element={<Testing />} />
      </Routes>
     </WagmiConfig>
     <Web3Modal
        projectId="exampletestprojectid"
        ethereumClient={ethereumClient}
        themeZIndex={1350}
      />
    )
}

This is my testing file where I have Web3button

import {  Web3Button } from "@web3modal/react";

export default function Testing() {
  <div>
    <Web3Button  />
  </div>
}

In desktop chrome browser it works as expected connects using metamask extension but when i open this in mobile chrome browser pressing connect opens metamask app in mobile but does not prompt connect or anything I want to achieve same behavior as they have in https://web3modal.com when i press connect in mobile browser it opens metamask asks to connect wallet and as soon as i connect it goes back to browser page

If everything else is fine, try this: ... version: 1, ...