title: Storybook cannot read property 'displayName' of undefined
body: <p>I have created a new component Navbar.jsx</p>
  <pre><code>import { Disclosure } from '@headlessui/react'
  import Image from 'next/image'
  import tacoPicture from '../public/lets-taco-bout-it.png'
  
  
  
  function classNames(...classes) {
    return classes.filter(Boolean).join(' ')
  }
  
  
  export const Header = () =&gt; {
    return (
      &lt;Disclosure as=&quot;nav&quot; className=&quot;bg-white shadow&quot;&gt;
        {({ open }) =&gt; (
          &lt;&gt;
            &lt;div className=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
              &lt;div className=&quot;flex items-center justify-between h-16&quot;&gt;
                &lt;div className=&quot;flex items-center&quot;&gt;
                  &lt;div className=&quot;flex-shrink-0&quot;&gt;
                  &lt;Image src={tacoPicture} alt=&quot;Picture of the author&quot; /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
                  
          &lt;/&gt;
        )}
      &lt;/Disclosure&gt;
    )
  }
  </code></pre>
  <p>So, this needs to be described as a story. In my file Navbar.stories.jsx I do the following</p>
  <pre><code>import { Navbar } from './Navbar';
  
  export default {
      title: 'Example/Navbar',
      component: Navbar,
    };
    
  const Template = (args) =&gt; &lt;Navbar {...args} /&gt;;
  
  export const Default = Template.bind({});
  </code></pre>
  <p>And get the error:</p>
  <p><a href="https://i.stack.imgur.com/hpsvL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hpsvL.png" alt="enter image description here" /></a></p>
  <p>I am new to storybook, however it seems to be a react issue, which I am also new to.</p>