title: Using useRef() in a Storybook preview
body: <p>I'm writing a Storybook entry for a React hook that uses a ref passed into it. I wrote a small sample component that I want to render as part of the Storybook to show how the hook works. Eg:</p>
  <pre><code>const MyExample = () =&gt; {
      const contentRef = useRef();
      const someValue = myHook(contentRef);
      return (
          &lt;div ref={contentRef}&gt;
              {JSON.stringify(someValue)}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>But when I try rendering this in StoryBook as below (with the above code inlined above the <code>&lt;Preview&gt;</code>):</p>
  <pre><code>&lt;Preview&gt;
      &lt;Story name=&quot;Example&quot;&gt;
          {&lt;MyExample /&gt;}
      &lt;/Story&gt;
  &lt;/Preview&gt;
  </code></pre>
  <p>I get the following error:</p>
  <pre><code>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
  
  Check the render method of `MDXCreateElement`.
      in Unknown (created by MDXCreateElement)
      in MDXCreateElement
      in Unknown (created by InlineStory)
      in InlineStory (created by Story)
      in Story (created by Context.Consumer)
      in MDXProvider (created by Context.Consumer)
      in div (created by Context.Consumer)
      in Story (created by MDXCreateElement)
      in MDXCreateElement (created by MDXContent)
      in div (created by Preview)
      in div (created by Context.Consumer)
      in Styled(div) (created by Preview)
      in div (created by Context.Consumer)
      in Styled(div) (created by Preview)
      in div (created by Context.Consumer)
      in Styled(div) (created by Preview)
      in Preview (created by Canvas)
      in MDXProvider (created by Canvas)
      in Canvas (created by deprecated)
      in deprecated (created by MDXCreateElement)
      in MDXCreateElement (created by MDXContent)
      in wrapper (created by MDXCreateElement)
      in MDXCreateElement (created by MDXContent)
      ...
  </code></pre>
  <p>Is there a way to correctly render this component without breaking it out into another file just for this story? The component works fine in browser.</p>