I have two value to inspect and display to my page: connected(boolean) and publicKey(PublicKey). If the value of any one is changed, re-render the component and displayed the changed value on the page.

Currently my code is as below, it won't show the changes even the value was updated. What should I do?

import { useWallet } from "@solana/wallet-adapter-react";
import { useEffect } from "react";

export default function TestComponent() {
    const { connected, publicKey } = useWallet();

    return (
        <div>
            <h2>Is Connect?: {connected}</h2>
            <h2>Public Key: {publicKey?.toString}</h2>
        </div>
    )
}

And the source code of useWallet() is about:

export interface WalletContextState extends WalletAdapterProps {
    wallets: Wallet[];
    autoConnect: boolean;
    wallet: Wallet | null;
}

export interface WalletAdapterProps {
    publicKey: PublicKey | null;
    connected: boolean;
}

export const WalletContext = createContext<WalletContextState>({} as WalletContextState);

export function useWallet(): WalletContextState {
    return useContext(WalletContext);
}