在这段代码中，我想在我的UI上显示tokenbalance和nativebalance
我用的是wagmi和rainbowkit

import React, { useEffect, useState } from 'react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { fetchBalance,getAccount } from '@wagmi/core';
import type { NextPage } from 'next';

const WalletPage: NextPage = () => {
  const account = getAccount()
  const [balance, setBalance] = useState();
  const [tokenBalance, setTokenBalance] = useState();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const balanceData = await fetchBalance({
          address: account.address,
        });
        setBalance(balanceData);

        const tokenBalanceData = await fetchBalance({
          address: account.address,
          token: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
        });
        setTokenBalance(tokenBalanceData);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <ConnectButton />
      {balance && (
        <p>
          Balance: {balance.formatted} {balance.symbol}
        </p>
      )}
      {tokenBalance && (
        <p>
          Token Balance: {tokenBalance.formatted} {tokenBalance.symbol}
        </p>
      )}
    </div>
  );
};

export default WalletPage;

当我在metamask中更改帐户时，在connectButton模块上一切正常，但在我的UI中，我必须手动刷新以获得标记，我知道在使用钩子时不应该这样做。那么，使用wagmi钩子的正确方法是什么呢？
我需要在metamask中cahnging帐户时在我的ui上获得tokenBalance和本地余额