TypeError: Cannot read properties of null (reading 'useContext')

[billsbooth]

Just following the tutorial on a next.js setup, and getting TypeError: Cannot read properties of null (reading 'useContext') when trying to call useWallet();

import '../styles/globals.css'
import type { AppProps } from 'next/app'

import {
  WalletProvider,
  HippoWalletAdapter,
  AptosWalletAdapter,
  HippoExtensionWalletAdapter,
  MartianWalletAdapter,
  FewchaWalletAdapter,
  PontemWalletAdapter,
  SpikaWalletAdapter,
  RiseWalletAdapter,
  FletchWalletAdapter,
  TokenPocketWalletAdapter,
  ONTOWalletAdapter,
  SafePalWalletAdapter
} from '@manahippo/aptos-wallet-adapter';

const wallets = [
  new HippoWalletAdapter(),
  new MartianWalletAdapter(),
  new AptosWalletAdapter(),
  new FewchaWalletAdapter(),
  new HippoExtensionWalletAdapter(),
  new PontemWalletAdapter(),
  new SpikaWalletAdapter(),
  new RiseWalletAdapter(),
  new FletchWalletAdapter(),
  new TokenPocketWalletAdapter(),
  new ONTOWalletAdapter(),
  new SafePalWalletAdapter(),
];

function MyApp({ Component, pageProps }: AppProps) {
  <WalletProvider
      wallets={wallets}
      autoConnect={true}
      onError={(error: Error) => {
        console.log('Handle Error Message', error);
      }}>
    <Component {...pageProps} />
  </WalletProvider>
}

export default MyApp

import type { NextPage } from 'next'
import { AptosWalletName, useWallet } from "@manahippo/aptos-wallet-adapter"

const { connect } = useWallet();

const Home: NextPage = () => {
  return (
    <div>
      <button onClick={() => { connect(AptosWalletName); }} > Connect </button>
    </div>
  )
}

export default Home

[quagliero]

@kingaptos your hook call needs to be inside the render function:

const Home: NextPage = () => {

  const { connect } = useWallet();

  return (
    <div>
      <button onClick={() => { connect(AptosWalletName); }} > Connect </button>
    </div>
  )
}