How do you change the object provided by the Connect Button? Error: network does not support ENS

Im getting the error right after clicking the Connect Button. I have read it has to do with the fact that ethers received something different than a hex format address. My wallet gets connected and I get to sign the transaction to connect but the error keeps showing up in the console. This is my configuration so far:

      import { SiweMessage } from "siwe";
      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,
        defaultChains,
        createClient,
        useConnect,
        useAccount,
        useNetwork,
        useSignMessage,
        createStorage
      } from "wagmi";
      import { alchemyProvider } from "wagmi/providers/alchemy";
      import { publicProvider } from "wagmi/providers/public";
      import { create } from "domain";

      const alchemyId = process.env.ALCHEMY_ID;

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

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

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

      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 { signMessageAsync } = useSignMessage({
          onError(error) {
            console.log("Error", error);
          },
          onSuccess(data) {
            console.log("Success", data);
          }
        });

        return (
          <div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
                  <ConnectButton />
            <Toaster />
          </div>
        );
      }

Any help wil be really appreciated!

rainbow-me / rainbow

How do you change the object provided by the Connect Button? Error: network does not support ENS #3712