title: Mock useState in StorybookJS
body: <p>I wonder, what is the &quot;Best Practice&quot; for mocking React States in Storybooks (e.g. *.stories.js).</p>
  <p>Currently I'm trying to implement a Dark Theme Switch.</p>
  <ol>
  <li>App Component has a state called &quot;darkState&quot;, which can be set true/false</li>
  <li>App Component has a handler &quot;handleThemeChange()&quot;, which changes MUI Theme, based upon &quot;darkState&quot;</li>
  <li>Header Component has a Switch or Button with &quot;onChange()&quot; which triggers &quot;handleThemeChange()&quot; in App Component</li>
  <li>The MUI Switch needs a state in order to work properly (at least I guess it does)</li>
  </ol>
  <p>So, I decided to mock the state in my stories file.
  But writing this in a decorators seems ... strange. How do you solve this problem?</p>
  <p><strong>/components/Header/Header.stories.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  import { Header } from &quot;./Header&quot;;
  
  export default {
    title: &quot;Components/Header&quot;,
    component: Header,
    decorators: [
      (StoryFn) =&gt; {
        // mock state
        const [darkState, setDarkState] = useState(false);
        const handleThemeChange = () =&gt; {
          setDarkState(!darkState);
          return darkState;
        };
  
        return (
          &lt;Header
            enableThemeChange={true}
            handleThemeChange={handleThemeChange}
            darkState={darkState}
          /&gt;
        );
      }
    ]
  };
  
  const Template = (args) =&gt; &lt;Header {...args} /&gt;;
  export const Default = Template.bind({});
  
  // define Controls
  Default.args = {
    enableThemeChange: true,
    darkState: true
  };
  </code></pre>