diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx
index 559555c0bd..214817620b 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx
@@ -1,6 +1,6 @@
 import type { CreateOrganizationModalProps } from '@clerk/types';
 
-import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { CreateOrganizationContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -37,11 +37,11 @@ export const CreateOrganizationModal = (props: CreateOrganizationModalProps): JS
 
   return (
     <Route path='createOrganization'>
-      <ComponentContext.Provider value={createOrganizationProps}>
+      <CreateOrganizationContext.Provider value={createOrganizationProps}>
         <div>
           <CreateOrganization />
         </div>
-      </ComponentContext.Provider>
+      </CreateOrganizationContext.Provider>
     </Route>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
index e540dacf64..116eb1f5d4 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
@@ -2,7 +2,7 @@ import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
 
-import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -58,12 +58,12 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps):
 
   return (
     <Route path='organizationProfile'>
-      <ComponentContext.Provider value={organizationProfileProps}>
+      <OrganizationProfileContext.Provider value={organizationProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
           <OrganizationProfile {...organizationProfileProps} />
         </div>
-      </ComponentContext.Provider>
+      </OrganizationProfileContext.Provider>
     </Route>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/UserVerification/index.tsx b/packages/clerk-js/src/ui/components/UserVerification/index.tsx
index 6a5d1d3863..964487cdef 100644
--- a/packages/clerk-js/src/ui/components/UserVerification/index.tsx
+++ b/packages/clerk-js/src/ui/components/UserVerification/index.tsx
@@ -1,7 +1,7 @@
 import type { __experimental_UserVerificationModalProps, __experimental_UserVerificationProps } from '@clerk/types';
 import React, { useEffect } from 'react';
 
-import { ComponentContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch } from '../../router';
 import { UserVerificationFactorOne } from './UserVerificationFactorOne';
@@ -37,7 +37,7 @@ const UserVerification: React.ComponentType<__experimental_UserVerificationProps
 const UserVerificationModal = (props: __experimental_UserVerificationModalProps): JSX.Element => {
   return (
     <Route path='user-verification'>
-      <ComponentContext.Provider
+      <UserVerificationContext.Provider
         value={{
           componentName: 'UserVerification',
           ...props,
@@ -51,7 +51,7 @@ const UserVerificationModal = (props: __experimental_UserVerificationModalProps)
             routing='virtual'
           />
         </div>
-      </ComponentContext.Provider>
+      </UserVerificationContext.Provider>
     </Route>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx b/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx
index b88a8f7e5d..398b4707e0 100644
--- a/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx
+++ b/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx
@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import type { WaitlistModalProps } from '@clerk/types';
 
-import { ComponentContext, useWaitlistContext } from '../../contexts';
+import { useWaitlistContext, WaitlistContext } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { Card, withCardStateProvider } from '../../elements';
 import { Route, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
@@ -52,11 +52,11 @@ export const WaitlistModal = (props: WaitlistModalProps): JSX.Element => {
 
   return (
     <Route path='waitlist'>
-      <ComponentContext.Provider value={{ ...waitlistProps, componentName: 'Waitlist', mode: 'modal' }}>
+      <WaitlistContext.Provider value={{ ...waitlistProps, componentName: 'Waitlist', mode: 'modal' }}>
         <div>
           <Waitlist />
         </div>
-      </ComponentContext.Provider>
+      </WaitlistContext.Provider>
     </Route>
   );
 };
diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
index 1ce81c775b..429887243d 100644
--- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
@@ -1,7 +1,13 @@
 import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
 import { useClerk } from '@clerk/shared/react';
 import { snakeToCamel } from '@clerk/shared/underscore';
-import type { HandleOAuthCallbackParams, OrganizationResource, UserResource } from '@clerk/types';
+import type {
+  HandleOAuthCallbackParams,
+  OrganizationResource,
+  UserButtonProps,
+  UserResource,
+  WaitlistProps,
+} from '@clerk/types';
 import React, { useCallback, useMemo } from 'react';
 
 import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants';
@@ -13,7 +19,8 @@ import type { NavbarRoute } from '../elements';
 import type { ParsedQueryString } from '../router';
 import { useRouter } from '../router';
 import type {
-  AvailableComponentCtx,
+  AvailableComponentName,
+  AvailableComponentProps,
   CreateOrganizationCtx,
   GoogleOneTapCtx,
   OrganizationListCtx,
@@ -35,26 +42,70 @@ import {
 
 const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ });
 
-export const ComponentContext = React.createContext<AvailableComponentCtx | null>(null);
-
-export function componentContextWrapper({ componentName }: { componentName: 'SignIn' }): typeof SignInContext;
-export function componentContextWrapper({ componentName }: { componentName: 'SignUp' }): typeof SignUpContext;
-export function componentContextWrapper({ componentName }: { componentName: 'UserProfile' }): typeof UserProfileContext;
-export function componentContextWrapper({ componentName }: { componentName: string }): typeof ComponentContext;
-export function componentContextWrapper({
+export function ComponentContextProvider({
   componentName,
+  props,
+  children,
 }: {
-  componentName: string;
-}): typeof SignInContext | typeof SignUpContext | typeof UserProfileContext | typeof ComponentContext {
+  componentName: AvailableComponentName;
+  props: AvailableComponentProps;
+  children: React.ReactNode;
+}) {
   switch (componentName) {
     case 'SignIn':
-      return SignInContext;
+      return <SignInContext.Provider value={{ componentName, ...props }}>{children}</SignInContext.Provider>;
     case 'SignUp':
-      return SignUpContext;
+      return <SignUpContext.Provider value={{ componentName, ...props }}>{children}</SignUpContext.Provider>;
     case 'UserProfile':
-      return UserProfileContext;
+      return <UserProfileContext.Provider value={{ componentName, ...props }}>{children}</UserProfileContext.Provider>;
+    case 'UserVerification':
+      return (
+        <UserVerificationContext.Provider value={{ componentName, ...props }}>
+          {children}
+        </UserVerificationContext.Provider>
+      );
+    case 'UserButton':
+      return (
+        <UserButtonContext.Provider value={{ componentName, ...(props as UserButtonProps) }}>
+          {children}
+        </UserButtonContext.Provider>
+      );
+    case 'OrganizationSwitcher':
+      return (
+        <OrganizationSwitcherContext.Provider value={{ componentName, ...props }}>
+          {children}
+        </OrganizationSwitcherContext.Provider>
+      );
+    case 'OrganizationList':
+      return (
+        <OrganizationListContext.Provider value={{ componentName, ...props }}>
+          {children}
+        </OrganizationListContext.Provider>
+      );
+    case 'OrganizationProfile':
+      return (
+        <OrganizationProfileContext.Provider value={{ componentName, ...props }}>
+          {children}
+        </OrganizationProfileContext.Provider>
+      );
+    case 'CreateOrganization':
+      return (
+        <CreateOrganizationContext.Provider value={{ componentName, ...props }}>
+          {children}
+        </CreateOrganizationContext.Provider>
+      );
+    case 'GoogleOneTap':
+      return (
+        <GoogleOneTapContext.Provider value={{ componentName, ...props }}>{children}</GoogleOneTapContext.Provider>
+      );
+    case 'Waitlist':
+      return (
+        <WaitlistContext.Provider value={{ componentName, ...(props as WaitlistProps) }}>
+          {children}
+        </WaitlistContext.Provider>
+      );
     default:
-      return ComponentContext;
+      throw new Error(`Unknown component context: ${componentName}`);
   }
 }
 
@@ -291,30 +342,38 @@ export const useUserProfileContext = (): UserProfileContextType => {
 
 export type UserVerificationContextType = UserVerificationCtx;
 
+export const UserVerificationContext = React.createContext<UserVerificationCtx | null>(null);
+
 export const useUserVerification = (): UserVerificationContextType => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as UserVerificationCtx;
+  const context = React.useContext(UserVerificationContext);
 
-  if (componentName !== 'UserVerification') {
+  if (!context || context.componentName !== 'UserVerification') {
     throw new Error('Clerk: useUserVerificationContext called outside of the mounted UserVerification component.');
   }
 
+  const { componentName, ...ctx } = context;
+
   return {
     ...ctx,
     componentName,
   };
 };
 
+export const UserButtonContext = React.createContext<UserButtonCtx | null>(null);
+
 export const useUserButtonContext = () => {
-  const { componentName, customMenuItems, ...ctx } = (React.useContext(ComponentContext) || {}) as UserButtonCtx;
+  const context = React.useContext(UserButtonContext);
   const clerk = useClerk();
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
   const options = useOptions();
 
-  if (componentName !== 'UserButton') {
+  if (!context || context.componentName !== 'UserButton') {
     throw new Error('Clerk: useUserButtonContext called outside of the mounted UserButton component.');
   }
 
+  const { componentName, customMenuItems, ...ctx } = context;
+
   const signInUrl = ctx.signInUrl || options.signInUrl || displayConfig.signInUrl;
   const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl;
 
@@ -361,15 +420,19 @@ export const useUserButtonContext = () => {
   };
 };
 
+export const OrganizationSwitcherContext = React.createContext<OrganizationSwitcherCtx | null>(null);
+
 export const useOrganizationSwitcherContext = () => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationSwitcherCtx;
+  const context = React.useContext(OrganizationSwitcherContext);
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
 
-  if (componentName !== 'OrganizationSwitcher') {
+  if (!context || context.componentName !== 'OrganizationSwitcher') {
     throw new Error('Clerk: useOrganizationSwitcherContext called outside OrganizationSwitcher.');
   }
 
+  const { componentName, ...ctx } = context;
+
   const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl;
   const afterLeaveOrganizationUrl = ctx.afterLeaveOrganizationUrl || displayConfig.afterLeaveOrganizationUrl;
 
@@ -464,15 +527,19 @@ export const useOrganizationSwitcherContext = () => {
   };
 };
 
+export const OrganizationListContext = React.createContext<OrganizationListCtx | null>(null);
+
 export const useOrganizationListContext = () => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as unknown as OrganizationListCtx;
+  const context = React.useContext(OrganizationListContext);
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
 
-  if (componentName !== 'OrganizationList') {
+  if (!context || context.componentName !== 'OrganizationList') {
     throw new Error('Clerk: useOrganizationListContext called outside OrganizationList.');
   }
 
+  const { componentName, ...ctx } = context;
+
   const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl;
 
   const navigateAfterCreateOrganization = (organization: OrganizationResource) => {
@@ -550,16 +617,20 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isGeneralPageRoot: boolean;
 };
 
+export const OrganizationProfileContext = React.createContext<OrganizationProfileCtx | null>(null);
+
 export const useOrganizationProfileContext = (): OrganizationProfileContextType => {
-  const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationProfileCtx;
+  const context = React.useContext(OrganizationProfileContext);
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
   const clerk = useClerk();
 
-  if (componentName !== 'OrganizationProfile') {
+  if (!context || context.componentName !== 'OrganizationProfile') {
     throw new Error('Clerk: useOrganizationProfileContext called outside OrganizationProfile.');
   }
 
+  const { componentName, customPages, ...ctx } = context;
+
   const pages = useMemo(() => createOrganizationProfileCustomPages(customPages || [], clerk), [customPages]);
 
   const navigateAfterLeaveOrganization = () =>
@@ -581,15 +652,19 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   };
 };
 
+export const CreateOrganizationContext = React.createContext<CreateOrganizationCtx | null>(null);
+
 export const useCreateOrganizationContext = () => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as CreateOrganizationCtx;
+  const context = React.useContext(CreateOrganizationContext);
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
 
-  if (componentName !== 'CreateOrganization') {
+  if (!context || context.componentName !== 'CreateOrganization') {
     throw new Error('Clerk: useCreateOrganizationContext called outside CreateOrganization.');
   }
 
+  const { componentName, ...ctx } = context;
+
   const navigateAfterCreateOrganization = (organization: OrganizationResource) => {
     if (typeof ctx.afterCreateOrganizationUrl === 'function') {
       return navigate(ctx.afterCreateOrganizationUrl(organization));
@@ -615,16 +690,20 @@ export const useCreateOrganizationContext = () => {
   };
 };
 
+export const GoogleOneTapContext = React.createContext<GoogleOneTapCtx | null>(null);
+
 export const useGoogleOneTapContext = () => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
+  const context = React.useContext(GoogleOneTapContext);
   const options = useOptions();
   const { displayConfig } = useEnvironment();
   const { queryParams } = useRouter();
 
-  if (componentName !== 'GoogleOneTap') {
+  if (!context || context.componentName !== 'GoogleOneTap') {
     throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
   }
 
+  const { componentName, ...ctx } = context;
+
   const generateCallbackUrls = useCallback(
     (returnBackUrl: string): HandleOAuthCallbackParams => {
       const redirectUrls = new RedirectUrls(
@@ -704,11 +783,19 @@ export type WaitlistContextType = WaitlistCtx & {
   redirectUrl?: string;
 };
 
+export const WaitlistContext = React.createContext<WaitlistCtx | null>(null);
+
 export const useWaitlistContext = (): WaitlistContextType => {
-  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as WaitlistCtx;
+  const context = React.useContext(WaitlistContext);
   const { displayConfig } = useEnvironment();
   const options = useOptions();
 
+  if (!context || context.componentName !== 'Waitlist') {
+    throw new Error('Clerk: useWaitlistContext called outside Waitlist.');
+  }
+
+  const { componentName, ...ctx } = context;
+
   let signInUrl = ctx.signInUrl || options.signInUrl || displayConfig.signInUrl;
   signInUrl = buildURL({ base: signInUrl }, { stringify: true });
 
diff --git a/packages/clerk-js/src/ui/portal/index.tsx b/packages/clerk-js/src/ui/portal/index.tsx
index 862ce3ce26..69850b4a69 100644
--- a/packages/clerk-js/src/ui/portal/index.tsx
+++ b/packages/clerk-js/src/ui/portal/index.tsx
@@ -5,16 +5,16 @@ import ReactDOM from 'react-dom';
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
 import { normalizeRoutingOptions } from '../../utils/normalizeRoutingOptions';
-import { ComponentContext, componentContextWrapper } from '../contexts';
+import { ComponentContextProvider } from '../contexts';
 import { HashRouter, PathRouter, VirtualRouter } from '../router';
-import type { AvailableComponentCtx } from '../types';
+import type { AvailableComponentCtx, AvailableComponentName } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
   node: HTMLDivElement;
   component: React.FunctionComponent<PropsType> | React.ComponentClass<PropsType, any>;
   // Aligning this with props attributes of ComponentControls
   props?: PropsType & RoutingOptions;
-} & Pick<CtxType, 'componentName'>;
+} & { componentName: AvailableComponentName };
 
 export function Portal<CtxType extends AvailableComponentCtx>({
   props,
@@ -24,13 +24,15 @@ export function Portal<CtxType extends AvailableComponentCtx>({
 }: PortalProps<CtxType>) {
   const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props?.routing, path: props?.path }) };
 
-  const ComponentContextProvider = componentContextWrapper({ componentName });
   const el = (
-    <ComponentContextProvider.Provider value={{ componentName: componentName, ...normalizedProps } as CtxType}>
+    <ComponentContextProvider
+      componentName={componentName}
+      props={normalizedProps}
+    >
       <Suspense fallback={''}>
         {React.createElement(component, normalizedProps as PortalProps<CtxType>['props'])}
       </Suspense>
-    </ComponentContextProvider.Provider>
+    </ComponentContextProvider>
   );
 
   if (normalizedProps?.routing === 'path') {
@@ -56,7 +58,7 @@ type VirtualBodyRootPortalProps<CtxType extends AvailableComponentCtx, PropsType
   component: React.FunctionComponent<PropsType> | React.ComponentClass<PropsType, any>;
   props?: PropsType;
   startPath: string;
-} & Pick<CtxType, 'componentName'>;
+} & { componentName: AvailableComponentName };
 
 export class VirtualBodyRootPortal<CtxType extends AvailableComponentCtx> extends React.PureComponent<
   VirtualBodyRootPortalProps<CtxType>
@@ -76,9 +78,12 @@ export class VirtualBodyRootPortal<CtxType extends AvailableComponentCtx> extend
 
     return ReactDOM.createPortal(
       <VirtualRouter startPath={startPath}>
-        <ComponentContext.Provider value={{ componentName: componentName, ...props } as CtxType}>
+        <ComponentContextProvider
+          componentName={componentName}
+          props={props ?? {}}
+        >
           <Suspense fallback={''}>{React.createElement(component, props as PortalProps<CtxType>['props'])}</Suspense>
-        </ComponentContext.Provider>
+        </ComponentContextProvider>
       </VirtualRouter>,
       this.elRef,
     );
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
index 04564ce52b..366358c2d7 100644
--- a/packages/clerk-js/src/ui/types.ts
+++ b/packages/clerk-js/src/ui/types.ts
@@ -106,3 +106,5 @@ export type AvailableComponentCtx =
   | OrganizationListCtx
   | GoogleOneTapCtx
   | WaitlistCtx;
+
+export type AvailableComponentName = AvailableComponentCtx['componentName'];
diff --git a/packages/clerk-js/src/ui/utils/test/createFixtures.tsx b/packages/clerk-js/src/ui/utils/test/createFixtures.tsx
index 303900c2a9..1692abeb50 100644
--- a/packages/clerk-js/src/ui/utils/test/createFixtures.tsx
+++ b/packages/clerk-js/src/ui/utils/test/createFixtures.tsx
@@ -5,22 +5,21 @@ import React from 'react';
 import { Clerk as ClerkCtor } from '../../../core/clerk';
 import { Client, Environment } from '../../../core/resources';
 import {
-  ComponentContext,
-  componentContextWrapper,
+  ComponentContextProvider,
   CoreClerkContextWrapper,
   EnvironmentProvider,
+  GoogleOneTapContext,
   OptionsProvider,
 } from '../../contexts';
 import { AppearanceProvider } from '../../customizables';
 import { FlowMetadataProvider } from '../../elements';
 import { RouteContext } from '../../router';
 import { InternalThemeProvider } from '../../styledSystem';
+import type { AvailableComponentName, AvailableComponentProps } from '../../types';
 import { createClientFixtureHelpers, createEnvironmentFixtureHelpers } from './fixtureHelpers';
 import { createBaseClientJSON, createBaseEnvironmentJSON } from './fixtures';
 import { mockClerkMethods, mockRouteContextValue } from './mockHelpers';
 
-type UnpackContext<T> = NonNullable<T extends React.Context<infer U> ? U : T>;
-
 const createInitialStateConfigParam = (baseEnvironment: EnvironmentJSON, baseClient: ClientJSON) => {
   return {
     ...createEnvironmentFixtureHelpers(baseEnvironment),
@@ -40,8 +39,8 @@ export const bindCreateFixtures = (
   return { createFixtures: unboundCreateFixtures(componentName, mockOpts) };
 };
 
-const unboundCreateFixtures = <N extends UnpackContext<typeof ComponentContext>['componentName']>(
-  componentName: N,
+const unboundCreateFixtures = (
+  componentName: AvailableComponentName,
   mockOpts?: {
     router?: Parameters<typeof mockRouteContextValue>[0];
   },
@@ -81,7 +80,7 @@ const unboundCreateFixtures = <N extends UnpackContext<typeof ComponentContext>[
       options: optionsMock,
     };
 
-    let componentContextProps: Partial<UnpackContext<typeof ComponentContext> & { componentName: N }>;
+    let componentContextProps: AvailableComponentProps;
     const props = {
       setProps: (props: typeof componentContextProps) => {
         componentContextProps = props;
@@ -91,24 +90,31 @@ const unboundCreateFixtures = <N extends UnpackContext<typeof ComponentContext>[
     const MockClerkProvider = (props: any) => {
       const { children } = props;
 
-      const ContextProvider = componentContextWrapper({ componentName });
+      const componentsWithoutContext = ['UsernameSection', 'UserProfileSection'];
+      const contextWrappedChildren = !componentsWithoutContext.includes(componentName) ? (
+        <ComponentContextProvider
+          componentName={componentName}
+          props={componentContextProps}
+        >
+          {children}
+        </ComponentContextProvider>
+      ) : (
+        <>{children}</>
+      );
+
       return (
         <CoreClerkContextWrapper
           clerk={clerkMock}
           // Clear swr cache
           swrConfig={{ provider: () => new Map() }}
         >
-          <ComponentContext.Provider value={{ componentName: 'GoogleOneTap' }} />
+          <GoogleOneTapContext.Provider value={{ componentName: 'GoogleOneTap' }} />
           <EnvironmentProvider value={environmentMock}>
             <OptionsProvider value={optionsMock}>
               <RouteContext.Provider value={routerMock}>
                 <AppearanceProvider appearanceKey={'signIn'}>
                   <FlowMetadataProvider flow={componentName as any}>
-                    <InternalThemeProvider>
-                      <ContextProvider.Provider value={{ ...componentContextProps, componentName }}>
-                        {children}
-                      </ContextProvider.Provider>
-                    </InternalThemeProvider>
+                    <InternalThemeProvider>{contextWrappedChildren}</InternalThemeProvider>
                   </FlowMetadataProvider>
                 </AppearanceProvider>
               </RouteContext.Provider>