Alternative to const [{ data: connectData }, connectAsync] = useConnect();

Im getting a type error saying that the data parameter "must have a 'Symbol.iterator' method that returns an iterator".

How this data paramater is retrieved? As of now the useConnect hook brings ({ chainId, connector, onError, onMutate, onSettled, onSuccess, } right? So Im a bit confused on how to get an entire object with all data from the hook itself. Here is my component:

    import Head from "next/head";
    import { useState, useEffect } from "react";
    import { useRouter } from "next/router";
    import LoadingDots from "@/components/tickets/loading-dots";
    import toast, { Toaster } from "react-hot-toast";

    import { ConnectButton, getDefaultWallets } from "@rainbow-me/rainbowkit";
    import {
      chain,
      configureChains,
      createClient,
      useConnect,
      useAccount,
      useNetwork,
      useSignMessage
    } from "wagmi";
    import { alchemyProvider } from "wagmi/providers/alchemy";
    import { publicProvider } from "wagmi/providers/public";

    const alchemyId = process.env.ALCHEMY_ID;

    const pageTitle = "Login";
    const logo = "/favicon.ico";
    export const { chains, provider } = configureChains(
      [chain.polygonMumbai],
      [alchemyProvider({ alchemyId }), publicProvider()]
    );

    export const { connectors } = getDefaultWallets({
      appName: "myapp",
      chains
    });

    export const client = createClient({
      autoConnect: true,
      connectors,
      provider
    });

    export default function Login() {
      const { query } = useRouter();
      const { displayError } = query;

      useEffect(() => {
        const errorMessage = Array.isArray(displayError)
          ? displayError.pop()
          : displayError;
        errorMessage && toast.error(errorMessage);
      }, [displayError]);

      const [{ data: connectData }, connectAsync] = useConnect();
      const [, signMessage] = useSignMessage();
      const handleLogin = async () => {
        try {
          const res = await connectAsync(connectData.connectors[0]);
          const callbackUrl = "/protected";
          const message = new SiweMessage({
            domain: window.location.host,
            address: res.data?.account,
            statement: "Sign in with Ethereum to the app.",
            uri: window.location.origin,
            version: "1",
            chainId: res.data?.chain?.id,
            nonce: await getCsrfToken()
          });
          const { data: signature, error } = await signMessage({
            message: message.prepareMessage()
          });
          signIn("credentials", {
            message: JSON.stringify(message),
            redirect: false,
            signature,
            callbackUrl
          });
        } catch (error) {
          console.log(error);
          window.alert(error);
        }
      };

      return (
          <div className="mt-8 mx-auto sm:w-full w-11/12 sm:max-w-md">
            <div className="bg-white py-8 px-4 shadow-md sm:rounded-lg sm:px-10">
              <div className="flex justify-center">
                <ConnectButton />
              </div>
            </div>
      );
    }

I also see you have the "types" command with tsc --noEmit. Does that have to do with avoiding this error?

spruceid / siwe-next-auth-example

Alternative to const [{ data: connectData }, connectAsync] = useConnect(); #10