NotificationBanner component - comp.setCollectionOptions is not a function

[BhaskaranR]

I am using nextjs, dynamically loading the banner component with ssr set to false, not able to get the notification banner component to work

'use client'
import { env } from '@/env.mjs';
import { cn } from '@/lib/utils';
import { StripeConnectInstance, loadConnectAndInitialize } from "@stripe/connect-js/pure";

import {
  ConnectNotificationBanner,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';
import { useEffect, useState } from 'react';

export default function StripeNotificationBanner({ className }: { className?: string }) {
  const [isClient, setIsClient] = useState(false)
  const [stripeConnectInstance, setStripeConnectInstance] = useState<StripeConnectInstance | null>(null);

  useEffect(() => {
    setIsClient(true)
  }, [])


  useEffect(() => {
    if (isClient) {
      const loadStripeConnect = async () => {
        const fetchClientSecret = async () => {
          const response = await fetch('/api/v1/stripe/company_account_session', {
            method: 'POST',
          });
          if (!response.ok) {
            const { error } = await response.json();
            console.log('An error occurred: ', error);
            return undefined;
          } else {
            const { client_secret: clientSecret } = await response.json();
            return clientSecret;
          }
        };

        const instance = await loadConnectAndInitialize({
          publishableKey: env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
          fetchClientSecret,
        });

        setStripeConnectInstance(instance);
      };

      loadStripeConnect();
    }
  }, [isClient]);


  if (!isClient || !stripeConnectInstance) {
    return null;
  }

  return (
      <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
        <ConnectNotificationBanner
          // Optional:
          // collectionOptions={{
          //   fields: 'eventually_due',
          //   futureRequirements: 'include',
          // }}
        />
      </ConnectComponentsProvider>)
}