How to use hooks in nextJs for rainbowkit and wagmi?

In this code I want to display tokenbalance and nativebalance on my UI

I#m using wagmi and 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;

When i change accounts in metamask, on the connectButton module everything works but in my UI i have to manually refresh to get the tokenablance and i know i shouldnt have to do this when using hooks.
So whats the proper way of using wagmi hooks?

I need to get tokenBalance and native balance on my ui when cahnging accounts in metamask

It's because you're useEffect dependencies are not setup to listen to changes in accounts. When you use [], you tell the useEffect to run once. if you want this to run again, you should make sure to add a dependency so that when the value for that dependency changes, it causes your useEffect to trigger again.

Maybe you could try something like;

useEffect(() => { ... }, [account.address])

This will cause the useEffect to run again if account.address changes.Be careful when doing this, however. It could cause your effect to trigger multiple times, so it might be a good idea to keep a copy of your current address in state and check against that value in an if condition before fetching again.