diff --git a/core/store/src/state/context/components.ts b/core/store/src/state/context/components.ts
index e091320ca..410882229 100644
--- a/core/store/src/state/context/components.ts
+++ b/core/store/src/state/context/components.ts
@@ -116,8 +116,9 @@ export const useComponent = ({
   name,
 }: ComponentInputProps): Component | undefined => {
   const story = useStory({ id: name });
+  const currentDoc = useCurrentDocument();
   const store = useStore();
-  const doc = story && story.doc ? store.docs[story.doc] : undefined;
+  const doc = story && story.doc ? store.docs[story.doc] : currentDoc;
   let component;
   if (of === CURRENT_STORY) {
     component = story ? story.component : doc?.component;
diff --git a/examples/stories/src/tutorial/getting-started/external-libraries.mdx b/examples/stories/src/tutorial/getting-started/external-libraries.mdx
index 49ee9f864..2ff04ecdc 100644
--- a/examples/stories/src/tutorial/getting-started/external-libraries.mdx
+++ b/examples/stories/src/tutorial/getting-started/external-libraries.mdx
@@ -10,7 +10,7 @@ image: /static/external-component-source.jpg
 ---
 import { Button } from 'theme-ui';
 import { ControlTypes } from '@component-controls/core';
-import { PropsTable, ComponentDeps, ComponentSource, Playground, Story } from '@component-controls/blocks';
+import { PropsTable, ComponentExternalDependencies, ComponentSource, Playground, Story } from '@component-controls/blocks';
 import noSetupImg from './media/external-component-no-setup.jpg';
 import sourceCodeImg from './media/external-component-source.jpg';
 
@@ -166,7 +166,7 @@ As a result, we should now see a full PropsTable for the `Button` component popu
 
 As well as the component's dependencies table:
 
-<ComponentDeps of={Button} />
+<ComponentExternalDependencies of={Button} />
 
 
 ## Component playground