title: Why are React defaultProps not passing values?
body: <pre class="lang-js prettyprint-override"><code>import { memo } from 'react';
  import classNames from 'classnames/bind';
  import styles from './Button.module.scss';
  
  const cn = classNames.bind(styles);
  
  const Button = memo(
    ({ design: { size, color, outline, hover }, content, type, onClick }) =&gt; (
      &lt;button
        type={type}
        className={cn('button', size, color, { outline }, { hover })}
        onClick={onClick}
      &gt;
        {content}
      &lt;/button&gt;
    )
  );
  
  Button.defaultProps = {
    size: 'md',
    color: 'black',
  };
  
  export default Button;
  </code></pre>
  <p><code>defaultProps</code> doesn't work in this case. If I set default value when destructuring props like:</p>
  <p><code>{ design: { size='md', color='black', outline, hover }, content, type, onClick }</code>, it works.</p>
  <p>I passed the props:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Button
      design={{ size: 'sm', outline: true }}
      content=&quot;Edit&quot;
      onClick={onEditClick}
  /&gt;
  </code></pre>
  <p>What's wrong here?</p>