import React from 'react';
import { StoryFn } from '@storybook/addons';

export const parameters = {
  docs: {
    inlineStories: true,
    prepareForInline: (storyFn: StoryFn<string>) => {
      const html = storyFn();
      if (typeof html === 'string') {
        // eslint-disable-next-line react/no-danger
        return <div dangerouslySetInnerHTML={{ __html: html }} />;
      }
      return <div ref={(node) => (node ? node.appendChild(html) : null)} />;
    },
  },
};

import React from 'react';
import { StoryFn } from '@storybook/addons';

export const parameters = {
  docs: {
    inlineStories: true,
    prepareForInline: (storyFn: StoryFn<string>) => (
      // eslint-disable-next-line react/no-danger
      <div dangerouslySetInnerHTML={{ __html: storyFn() }} />
    ),
  },
};

--- 
+++ 
@@ -4,9 +4,13 @@
 export const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline: (storyFn: StoryFn<string>) => (
-      // eslint-disable-next-line react/no-danger
-      <div dangerouslySetInnerHTML={{ __html: storyFn() }} />
-    ),
+    prepareForInline: (storyFn: StoryFn<string>) => {
+      const html = storyFn();
+      if (typeof html === 'string') {
+        // eslint-disable-next-line react/no-danger
+        return <div dangerouslySetInnerHTML={{ __html: html }} />;
+      }
+      return <div ref={(node) => (node ? node.appendChild(html) : null)} />;
+    },
   },
 };
Addon-docs: Fix inline rendering for DOM nodes in HTML
