diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/api/duplicate_dashboard_panel.test.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/api/duplicate_dashboard_panel.test.tsx
index 39bb0f754cfbed..3b372bf00c27ba 100644
--- a/src/plugins/dashboard/public/dashboard_container/embeddable/api/duplicate_dashboard_panel.test.tsx
+++ b/src/plugins/dashboard/public/dashboard_container/embeddable/api/duplicate_dashboard_panel.test.tsx
@@ -215,8 +215,6 @@ describe('React embeddables', () => {
           },
           {}
         );
-        fullApi$.next(fullApi);
-        fullApi$.complete();
         return {
           Component: () => <div> TEST DUPLICATE </div>,
           api: fullApi,
@@ -234,6 +232,7 @@ describe('React embeddables', () => {
         },
       },
     });
+
     // render a fake Dashboard to initialize react embeddables
     const FakeDashboard = () => {
       return (
@@ -244,7 +243,11 @@ describe('React embeddables', () => {
               <div style={{ width: '100%', height: '100px' }} key={panelId}>
                 <ReactEmbeddableRenderer
                   type={panel.type}
-                  onApiAvailable={(api) => dashboard.children$.next({ [panelId]: api })}
+                  onApiAvailable={(api) => {
+                    fullApi$.next(api as Api & HasSnapshottableState<{}>);
+                    fullApi$.complete();
+                    dashboard.children$.next({ [panelId]: api });
+                  }}
                   getParentApi={() => ({
                     getSerializedStateForChild: () =>
                       panel.explicitInput as unknown as SerializedPanelState<object> | undefined,
diff --git a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx
index 91f4e02527bbb1..953b57e4b207cd 100644
--- a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx
+++ b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx
@@ -105,15 +105,13 @@ export const ReactEmbeddableRenderer = <
         const setApi = (
           apiRegistration: SetReactEmbeddableApiRegistration<SerializedState, RuntimeState, Api>
         ) => {
-          const fullApi = {
+          return {
             ...apiRegistration,
             uuid,
             phase$,
             parentApi,
             type: factory.type,
           } as unknown as Api;
-          onApiAvailable?.(fullApi);
-          return fullApi;
         };
 
         const buildEmbeddable = async () => {
@@ -194,6 +192,7 @@ export const ReactEmbeddableRenderer = <
 
         try {
           const { api, Component } = await buildEmbeddable();
+          onApiAvailable?.(api);
           return React.forwardRef<typeof api>((_, ref) => {
             // expose the api into the imperative handle
             useImperativeHandle(ref, () => api, []);