我的Web3button位于我的nextjs网站的header组件中。当我登录或注销并保持在同一页面上时，它工作得很好。
但是，如果我注销，点击其中一个主导航菜单链接也位于标题，并试图重新连接，按钮似乎失去了连接状态。在这种情况下，Web3按钮仍然显示“连接钱包”，即使连接已经启动。如果我尝试再次单击该按钮，模态将尝试再次连接并显示错误消息。我必须完全刷新所有页面，以便按钮和模态得到刷新。

请在下面找到我的app.js，其中模态被示例化：

import "../styles/globals.css";
import { ThemeProvider } from "next-themes";
import Layout from "../components/layout";
import { Provider } from "react-redux";
import { store } from "../redux/store";
import { Web3Modal } from "@web3modal/react";
import Meta from "../components/Meta";
import UserContext from "../components/UserContext";
import { useEffect, useRef, useState } from "react";
import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
} from "@web3modal/ethereum";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { arbitrum } from "wagmi/chains";

function MyApp({ Component, pageProps }) {
  const [ready, setReady] = useState(false);
  const scrollRef = useRef({
    scrollPos: 0,
  });
  const chains = [arbitrum];
  const projectId = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
  const { provider } = configureChains(chains, [w3mProvider({ projectId })]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, version: 2, chains }),
    provider,
  });
  const ethereumClient = new EthereumClient(wagmiClient, chains);
  useEffect(() => {
    setReady(true);
  }, []);

  return (
    <>
      {ready ? (
        <WagmiConfig client={wagmiClient}>
          <Provider store={store}>
            <ThemeProvider enableSystem={true} attribute="class">
              <UserContext.Provider value={{ scrollRef: scrollRef }}>
                <Layout>
                  <Component {...pageProps} />
                </Layout>
              </UserContext.Provider>
            </ThemeProvider>
          </Provider>
        </WagmiConfig>
      ) : null}
      <Web3Modal
        themeVariables={{
          "--w3m-accent-color": "#8358FF",
          "--w3m-background-color": "#131740",
        }}
        projectId={projectId}
        ethereumClient={ethereumClient}
      />
    </>
  );
}

我的头文件：

import Image from "next/image";
import Link from "next/link";
import DarkMode from "../mode/DarkMode";
import Logo from "./../../public/images/logo.png";
import WhiteLogo from "./../../public/images/logo_white.png";
import { v4 as uuidv4 } from "uuid";
import { useRouter } from "next/router";
import {
  isChildrenPageActive,
  isParentPageActive,
} from "../../utils/daynamicNavigation";
import { useEffect, useState } from "react";
import { useAccount, useEnsName } from "wagmi";
import { Web3Button } from "@web3modal/react";
import DropDownInfos from "./fragments/DropDownInfos";

export default function Header() {
  const { address, isConnected } = useAccount();
  const { data: ensName } = useEnsName({ address });
  const [toggle, setToggle] = useState(false);
  const [isCollapse, setCollapse] = useState(null);
  const [hydrated, setHydrated] = useState(false);

  // window resize
  useEffect(() => {
    setHydrated(true);
    window.addEventListener("resize", () => {
      if (window.innerWidth >= 1024) {
        setToggle(false);
      }
    });
  }, []);

/* Some code */

            <div className="ml-8 hidden items-center lg:flex xl:ml-12">
              <Web3Button label="Connect" icon="show" />

我希望发生的是，按钮和模态的刷新应该显示实际的连接状态。