title: Storybook optional props force undefined
body: <p>I didn't find any answer that resolve my problem. I'm building a React Storybook with Typescript. With optional props, Storybook addon add an &quot;undefined&quot; option. I put a defaultProps but it doesn't take it. Do you have any solution ?</p>
  <p>Component :</p>
  <pre><code>type IconType = 'outline' | 'solid'
  
  export interface IconProps {
    name: keyof typeof icons
    size?: number
    type?: IconType
    className?: string
    fallback?:
      | boolean
      | React.ReactChild
      | React.ReactFragment
      | React.ReactPortal
      | null
  }
  
  const Icon = ({
    name,
    type = 'solid',
    className = '',
    size = 4,
    fallback = null,
  }: IconProps): JSX.Element =&gt; {
    if (!name) {
      throw new Error(&quot;Can't call Icon component without name props&quot;)
    }
  
    const Icon = React.lazy(
      () =&gt; import(`../${type}/${icons[name]}`)
    )
  
    return (
      &lt;React.Suspense fallback={fallback}&gt;
        &lt;Icon className={className} style={{width: size, height: size}} /&gt;
      &lt;/React.Suspense&gt;
    )
  }
  
  Icon.defaultProps = {
    type: 'solid',
  }
  
  export default Icon
  </code></pre>
  <p>Story:</p>
  <pre><code>import React from 'react'
  import { Story, Meta } from '@storybook/react'
  import Icon, { IconProps } from '.'
  
  export default {
    title: 'Components/Icon',
    component: Icon,
  } as Meta
  
  const Template: Story&lt;IconProps&gt; = (args) =&gt; &lt;Icon {...args} /&gt;
  
  export const Basic = Template.bind({})
  Basic.args = {
    name: 'plus',
  }
  </code></pre>
  <p>It shows me:
  <a href="https://i.stack.imgur.com/l4xQa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l4xQa.png" alt="enter image description here" /></a></p>
  <p>And when I select undefined it doesn't take the defaultProps of Icon </p>