There are no errors when running the project, but the wallet connection button is disabled.

[techeng322]

Hello, wallet adapter team. We encountered this problem while developing our staking platform. Below is codebase and current UI. The problem is that 'Wallet connection' is disabled even though there are no errors when running the project. So I'm not sure what the exact problem is. I'm still struggling to solve this problem. Thank you 🙏

import "@solana/wallet-adapter-react-ui/styles.css"

import type { AppProps } from "next/app"
import { useMemo } from "react"
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';

function MyApp({ Component, pageProps }: AppProps) {
  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
  const wallets = useMemo(
      () => [
          new PhantomWalletAdapter(),
      ],
      // eslint-disable-next-line react-hooks/exhaustive-deps
      [network]
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
           <Component {...pageProps} />
           <ToastContainer />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}
export default MyApp

import { WalletConnectButton } from "@solana/wallet-adapter-react-ui"

const PhaseContent = () => {
  return (
    <>
       <WalletConnectButton />
    </>
  )
}

export default PhaseContent

[techeng322]

Issue was <WalletModalButton /> before <WalletConnectButtton /> or <WalletDisconnectButton /> Thanks wallet-adapter team! 👍