error – Error: Must initialize before using hooks

I have just created a fresh Next app, and after adding line no. 6, I’m getting error. Why. Please answer it ASAP. Thanks in advance

like this —
enter image description here

import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useConnectWallet, useSetChain, useWallets } from "@web3-onboard/react";

const Home = () => {
  const [{ wallet }, connect, disconnect] = useConnectWallet();
  const [{ chains, connectedChain, settingChain }, setChain] = useSetChain();
  const connectedWallets = useWallets();
  return (
    <div className={styles.container}>
      <Head>
        <title>New - emax</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
      </main>
    </div>
  );
};```