title: How do I reuse knobs in Storybook's Component Story Format (CSF)?
body: <p>I've a simple <code>Button</code> component with multiple stories. All these stories need the same knobs configuration.</p>
  
  <p>This approach works:</p>
  
  <pre class="lang-js prettyprint-override"><code>export const Default = () =&gt; &lt;Button size={select('size', ['x-large', 'normal', 'x-small'], 'x-small')}&gt;Button&lt;/Button&gt;;
  export const Disabled = () =&gt; &lt;Button disabled size={select('size', ['x-large', 'normal', 'x-small'], 'x-small')}&gt;Button&lt;/Button&gt;;
  export const Outline = () =&gt; &lt;Button outline size={select('size', ['x-large','normal', 'x-small'], 'x-small')}&gt;Button&lt;/Button&gt;;
  </code></pre>
  
  <p>However, I don't want to repeat the <code>select</code> statement over and over. I tried spreading, like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>const knobs = {
    size: select('size', ['x-large', 'normal', 'x-small'], 'x-small')
  };
  ​
  export const Default = () =&gt; &lt;Button {...knobs}&gt;Button&lt;/Button&gt;;
  export const Disabled = () =&gt; &lt;Button disabled {...knobs}&gt;Button&lt;/Button&gt;;
  export const Outline = () =&gt; &lt;Button outline {...knobs}&gt;Button&lt;/Button&gt;;
  </code></pre>
  
  <p>But doesn't work: the knobs show in the UI, but when I update the dropdown, the new value isn't passed to the knob.</p>
  
  <p>What am I doing wrong here?</p>