'use client'

import { useWeb3Modal } from "@web3modal/wagmi/react"
import { useAccount, useDisconnect } from "wagmi"
import { shortAddress } from "@/utils/handler"

export default function WalletConnect() {
  const { address, isConnected } = useAccount()
  const { open } = useWeb3Modal()
  const { disconnect } = useDisconnect()

  return (
    <div className="mt-2 sm:mt-4 md:mt-0">
      {isConnected ? (
        <div className="flex justify-center items-stretch gap-1 sm:gap-2">
          <div className="bg-purple-light rounded-lg sm:rounded-xl py-1 sm:py-1.5 px-2 sm:px-4 text-lg md:text-xl">
            {shortAddress(address)}
          </div>
          <div
            className="flex items-center justify-center bg-purple-light hover:bg-blue cursor-pointer rounded-lg sm:rounded-xl px-2 sm:px-3 text-2xl sm:text-3xl"
            onClick={() => disconnect()}
          >
            ×
          </div>
        </div>
      ) : (
        <div
          className="bg-purple-light hover:bg-blue cursor-pointer rounded-lg sm:rounded-xl py-1 sm:py-1.5 px-4 sm:px-6 sm:text-xl md:text-2xl"
          onClick={() => open()}
        >
          CONNECT
        </div>
      )}
    </div>
  )
}

When I load this client component, I get Hydration failed error.
Why this error is happened in the client component?