useAccount returns wrong MetaMask address

[namnguyen2496]

I used Family's connectkit to connect our app with a MetaMask account and wagmi's useAccount hook to get the address of the connected wallet.

• wagmi is able to correctly identify the wallet address the first time I connected to MetaMask.
• When I tried to switch from one MetaMask account to another, wagmi's useAccount hook still returns the stale address, even though my MetaMask extension showed the the second account has been connected to our app.
• wagmi's useAccount hook only returns the new MetaMask address after I hard refresh our page.

This issue only happens when switching between 2 MetaMask acconts. Switching between MetaMask and another wallet (e.g: Coinbase) worked as expected.

What I have attempted:

• Clear localStorage before I called useAccount hook.
• Try to feed a custom MetaMask connector to our wagmi config:

const defaultWagmiClientProps = getDefaultClient({
  appName: "ABCXYZ",
  alchemyId: <REDACTED>,
  autoConnect: true,
  chains: getChains(),
});

const customMetamaskConnector = new MetaMaskConnector({
  chains: getChains(),
  options: {
    shimDisconnect: true,
    shimChainChangedDisconnect: true,
    UNSTABLE_shimOnConnectSelectAccount: true,
  },
});

const wagmiClientProps = {
  ...defaultWagmiClientProps,
  connectors: defaultWagmiClientProps?.connectors
    ? defaultWagmiClientProps.connectors.map((connector) =>
        connector.id !== customMetamaskConnector.id
          ? connector
          : customMetamaskConnector
      )
    : [customMetamaskConnector],
};

export const wagmiClient = createClient(wagmiClientProps);