Repository: storybook
Issue: React warning in browser console when controls are disabled
Labels: bug,has workaround,addon: controls,needs triage

**Describe the bug**
When using `controls: {disable: true}` in the parameters of a story,
the following warning message shows up in the browser console:

```
Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
```

**To Reproduce**
npx sb@next repro

Replace "@storybook/addon-essentials" in main.js with
        "@storybook/addon-docs",
        "@storybook/addon-controls",
        "@storybook/addon-actions",

Add `controls: {disable: true}` to the parameters of the Button Story

Reload Button story page and watch the browser console.

**System**
```
  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    Yarn: 2.4.2 - ~/.nvm/versions/node/v16.0.0/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-docs: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-essentials: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-links: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/node-logger: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
    @storybook/react: ^6.4.0-alpha.11 => 6.4.0-alpha.11
```

**Additional context**
I could only reproduce this when importing "@storybook/addon-docs", "@storybook/addon-controls" and "@storybook/addon-actions" instead of "@storybook/addon-essentials" so just importing "@storybook/addon-essentials" is a good workaround.