Inconsistent isConnected State and Unintended Reconnection Behavior of wagmi with web3Modal wallet connection

Question

I'm having trouble with the useAccount hook in the wagmi library when using it alongside the Web3Wallet modal. The isConnected flag isn't staying consistent, and the wallet seem like it's disconnecting and reconnecting randomly.

This is my configuration for wagmi and web3Wallet:

const WalletConnectProvider = ({
  networkMode,
  children,
}: {
  networkMode: NetworkMode;
  children: React.ReactNode;
}) => {
  const wagmiConfig = defaultWagmiConfig({
    projectId: WALLETCONNECT_PROJECT_ID,
    chains: networkMode === "mainnet" ? MAINNET_CHAINS : TESTNET_CHAINS,
    metadata,
    ssr: false,
  });

  createWeb3Modal({
    wagmiConfig,
    projectId: WALLETCONNECT_PROJECT_ID,
    metadata,
    allWallets: "SHOW",
  });

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
};

Reproduction

You can visit the site] and try to connect wallet and checkout the logs for connection status by switching menu items, also you can see the whole flow of connection in this repo

versions:

"wagmi": "^2.9.8", 
"@web3modal/wagmi": "^4.1.11"

Although i'm not getting issue on the local but the issue persist on the deployment