diff --git a/sample-apps/react/egress-composite/src/CompositeApp.tsx b/sample-apps/react/egress-composite/src/CompositeApp.tsx
index 5ef6b8e1b7..fde2b7cc71 100644
--- a/sample-apps/react/egress-composite/src/CompositeApp.tsx
+++ b/sample-apps/react/egress-composite/src/CompositeApp.tsx
@@ -8,29 +8,23 @@ import {
 import {
   EgressReadyNotificationProvider,
   useExternalCSS,
-  useInitializeClient,
+  useInitializeClientAndCall,
 } from './hooks';
 import { UIDispatcher, LogoAndTitleOverlay } from './components';
 
 import './CompositeApp.scss';
 
 export const CompositeApp = () => {
-  const { client, call: activeCall } = useInitializeClient();
-
-  if (!client) {
-    return <h2>Connecting...</h2>;
-  }
+  const { client, call } = useInitializeClientAndCall();
 
   return (
     <StreamVideo client={client}>
       <StreamThemeWrapper>
         <EgressReadyNotificationProvider>
-          {activeCall && (
-            <StreamCallProvider call={activeCall}>
-              <UIDispatcher />
-              <LogoAndTitleOverlay />
-            </StreamCallProvider>
-          )}
+          <StreamCallProvider call={call}>
+            <UIDispatcher />
+            <LogoAndTitleOverlay />
+          </StreamCallProvider>
         </EgressReadyNotificationProvider>
         {/* <StyleComponent /> */}
       </StreamThemeWrapper>
diff --git a/sample-apps/react/egress-composite/src/hooks/useInitializeClient.ts b/sample-apps/react/egress-composite/src/hooks/useInitializeClient.ts
index 021331394f..94166b6620 100644
--- a/sample-apps/react/egress-composite/src/hooks/useInitializeClient.ts
+++ b/sample-apps/react/egress-composite/src/hooks/useInitializeClient.ts
@@ -1,6 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import {
-  CallingState,
   StreamVideoClient,
   Call,
   StreamVideoParticipant,
@@ -11,56 +10,38 @@ import { useConfigurationContext } from '../ConfigurationContext';
 const useVideoStateMocks = ({
   client,
   call,
+  enabled,
 }: {
   client: StreamVideoClient;
   call: Call;
+  enabled: boolean;
 }) => {
   const { test_environment: testEnvironment } = useConfigurationContext();
 
   useEffect(() => {
-    if (!testEnvironment) return;
+    if (!enabled) return;
 
-    const { participants = [] } = testEnvironment;
+    const { participants = [] } = testEnvironment ?? {};
     // @ts-ignore
     client.writeableStateStore.registerCall(call);
     call.state.setParticipants(participants as StreamVideoParticipant[]);
     console.log({ client, call });
-  }, [client, call, testEnvironment]);
+  }, [client, call, testEnvironment, enabled]);
 };
 
-export const useInitializeClient = () => {
-  const {
-    base_url: baseURL,
-    api_key: apiKey,
-    user_id: userId,
-    call_type: callType,
-    call_id: callId,
-    test_environment: testEnvironment,
-    token,
-  } = useConfigurationContext();
-
-  const client = useMemo<StreamVideoClient>(() => {
-    return new StreamVideoClient(apiKey, {
-      baseURL,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiKey, baseURL, testEnvironment]);
-
-  // TODO: clean up this solution, have call always exist and check CallingState only
-  // probably wrap in useMemo instead as well
-  const [activeCall, setActiveCall] = useState<Call | undefined>(() => {
-    if (testEnvironment) {
-      return client.call(callType, callId);
-    }
-
-    return;
-  });
-
-  // mock state of client and call if "test_environment" exists
-  useVideoStateMocks({ client, call: activeCall! });
+const useJoinCall = ({
+  client,
+  call,
+  enabled,
+}: {
+  client: StreamVideoClient;
+  call: Call;
+  enabled: boolean;
+}) => {
+  const { token, user_id: userId } = useConfigurationContext();
 
   useEffect(() => {
-    if (testEnvironment) return;
+    if (!enabled) return;
 
     client.connectUser(
       {
@@ -72,29 +53,43 @@ export const useInitializeClient = () => {
     return () => {
       client.disconnectUser();
     };
-  }, [client, testEnvironment, token, userId]);
+  }, [client, enabled, token, userId]);
 
   useEffect(() => {
-    if (!client || testEnvironment) return;
+    if (!client || !enabled) return;
 
-    let joinInterrupted = false;
-    const call = client.call(callType, callId);
-    const currentCall = call.join().then(() => {
-      if (!joinInterrupted) {
-        setActiveCall(call);
-      }
-      return call;
-    });
+    const callJoinPromise = call.join();
     return () => {
-      joinInterrupted = true;
-      currentCall.then((theCall) => {
-        if (theCall && theCall.state.callingState !== CallingState.LEFT) {
-          theCall.leave();
-        }
-        setActiveCall(undefined);
+      callJoinPromise.then(() => {
+        call.leave();
       });
     };
-  }, [client, callType, callId, testEnvironment]);
+  }, [call, client, enabled]);
+};
+
+export const useInitializeClientAndCall = () => {
+  const {
+    base_url: baseURL,
+    api_key: apiKey,
+    call_type: callType,
+    call_id: callId,
+    test_environment: testEnvironment,
+  } = useConfigurationContext();
+
+  const client = useMemo<StreamVideoClient>(() => {
+    return new StreamVideoClient(apiKey, {
+      baseURL,
+    });
+  }, [apiKey, baseURL]);
+
+  const call = useMemo<Call>(() => {
+    return client.call(callType, callId);
+  }, [callId, callType, client]);
+
+  // mock state of client and call if "test_environment" exists
+  useVideoStateMocks({ client, call, enabled: !!testEnvironment });
+  // join call and proceed normally
+  useJoinCall({ client, call, enabled: !testEnvironment });
 
-  return { client, call: activeCall };
+  return { client, call };
 };