Uncaught Error: Multiple, Nested Usages of ConnectKitProvider Detected - No Duplicate Instances Found in Codebase

Question

Context

I'm working on a React application that utilizes ConnectKitProvider from the connectkit library. Recently, I encountered an error stating, "Uncaught Error: Multiple, nested usages of ConnectKitProvider detected. Please use only one." However, after a thorough review of my codebase, I've confirmed that there are no multiple instances of ConnectKitProvider being used in a nested manner. This leads me to believe the issue might be more subtle or related to how the provider is being used or instantiated.

Code Snippet

Here's a relevant portion of my code where ConnectKitProvider is used:

"use client";

import React from "react";
import { WagmiProvider, createConfig, http } from "wagmi";
import { polygon } from "wagmi/chains"; // Assuming polygonAmoy is not directly available
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, getDefaultConfig } from "connectkit";
import { LensConfig, LensProvider, development, production } from "@lens-protocol/react-web";
import { bindings } from "@lens-protocol/wagmi";

// connect kit doesn't export the config type, so we create it here
type ConnectKitConfig = Parameters<typeof getDefaultConfig>[0];

// differences in config between the environments
const appConfigs = {
 development: {
    connectkit: {
      chains: [polygon],
      transports: {
        [polygon.id]: http(),
      },
    } as Partial<ConnectKitConfig>,
    lens: {
      environment: development,
      debug: true,
    } as Partial<LensConfig>,
 },
 production: {
    connectkit: {
      chains: [polygon],
      transports: {
        [polygon.id]: http(),
      },
    } as Partial<ConnectKitConfig>,
    lens: {
      environment: production,
    } as Partial<LensConfig>,
 },
};

// select the config based on the environment
const appConfig = appConfigs["development"]; // or appConfigs["production"]

const wagmiConfig = createConfig(
 getDefaultConfig({
    appName: "Lens SDK Next.js Starter App",
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
    ssr: true,
    ...appConfig.connectkit,
 })
);

const queryClient = new QueryClient();

const lensConfig: LensConfig = {
 environment: development, // or production
 bindings: bindings(wagmiConfig),
 ...appConfig.lens,
};

export function Web3Provider({ children }: { children: React.ReactNode }) {
 return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          <LensProvider config={lensConfig}>{children}</LensProvider>
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
 );
};

What I've Tried

1. Reviewed the entire component tree to ensure ConnectKitProvider is not being used more than once. Checked for conditional rendering that might lead to multiple instances.

2. Ensured all dependencies are up to date.

3. Simplified the component tree to isolate the issue.

Question Given the information above, I'm at a loss as to why I'm encountering this error. Has anyone encountered a similar issue, or is there a specific configuration or usage pattern that might lead to this error message? Any insights or suggestions on how to further troubleshoot this issue would be greatly appreciated.