Coinbase Introduces Ethereum Staking for US Institutional Clients

I was trying to implement wagmi in my dapp, after I copied the example in the documentation https://wagmi.sh/examples/connect-wallet, I got this error: Error: Hydration failed because the initial UI does not match what was rendered on the server. Here is my code below.

import { WagmiConfig, createClient, defaultChains, configureChains } from "wagmi";  import { alchemyProvider } from "wagmi/providers/alchemy"; import { publicProvider } from "wagmi/providers/public";  import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet"; import { InjectedConnector } from "wagmi/connectors/injected"; import { MetaMaskConnector } from "wagmi/connectors/metaMask"; import { WalletConnectConnector } from "wagmi/connectors/walletConnect"; import Profile from "../components/Profile"; import TheHead from "../components/TheHead";  // Configure chains & providers with the Alchemy provider. // Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)  // Pass client to React Context Provider function App() {   const { chains, provider, webSocketProvider } = configureChains(defaultChains, [     alchemyProvider({ apiKey: process.env.RINKEBY_URL }),     publicProvider(),   ]);    // Set up client   const client = createClient({     autoConnect: true,     connectors: [       new MetaMaskConnector({ chains }),       new CoinbaseWalletConnector({         chains,         options: {           appName: "wagmi",         },       }),       new WalletConnectConnector({         chains,         options: {           qrcode: true,         },       }),       new InjectedConnector({         chains,         options: {           name: "Injected",           shimDisconnect: true,         },       }),     ],     provider,     webSocketProvider,   });    return (     <div>       <TheHead />       <WagmiConfig client={client}>         <Profile />       </WagmiConfig>     </div>   ); }  export default App; 

import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName } from "wagmi";  export default function Profile() {   const { address, connector, isConnected } = useAccount();   const { data: ensAvatar } = useEnsAvatar({ addressOrName: address });   const { data: ensName } = useEnsName({ address });   const { connect, connectors, error, isLoading, pendingConnector } = useConnect();   const { disconnect } = useDisconnect();    if (isConnected) {     return (       <div>         <Image src={ensAvatar} alt="ENS Avatar" height={70} width={70} />         <div>{ensName ? `${ensName} (${address})` : address}</div>         {/* <div>Connected to {connector.name}</div> */}         <button onClick={disconnect}>Disconnect</button>       </div>     );   }    return (     <div>       {connectors.map((connector) => (         <button disabled={!connector.ready} key={connector.id} onClick={() => connect({ connector })}>           {connector.name}           {!connector.ready && " (unsupported)"}           {isLoading && connector.id === pendingConnector?.id && " (connecting)"}         </button>       ))}        {error && <div>{error.message}</div>}     </div>   ); }