diff --git a/code/renderers/react/template/stories/teardown.stories.tsx b/code/renderers/react/template/stories/teardown.stories.tsx
new file mode 100644
index 000000000000..0d5840509619
--- /dev/null
+++ b/code/renderers/react/template/stories/teardown.stories.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const LoggingComponent = () => {
+  useEffect(() => {
+    console.log('mounted');
+    return () => {
+      console.log('unmounted');
+    };
+  }, []);
+
+  return 'Component';
+};
+
+export default {
+  component: LoggingComponent,
+  tags: ['autodocs'],
+  parameters: {
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = {};
diff --git a/code/ui/blocks/src/components/Story.tsx b/code/ui/blocks/src/components/Story.tsx
index 7fa72271d20c..a9211e24caf2 100644
--- a/code/ui/blocks/src/components/Story.tsx
+++ b/code/ui/blocks/src/components/Story.tsx
@@ -47,7 +47,9 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
     const cleanup = renderStoryToElement(story, element, { autoplay, forceInitialArgs });
     setShowLoader(false);
     return () => {
-      cleanup();
+      // It seems like you are supposed to unmount components outside of `useEffect`:
+      //   https://github.com/facebook/react/issues/25675#issuecomment-1363957941
+      setTimeout(() => cleanup(), 0);
     };
   }, [autoplay, renderStoryToElement, story]);