Repository: storybook
Issue: Cannot use SB hooks (`useArgs`) in React component rendered inside decorator or render function.
Labels: question / support,documentation,has workaround,args

**Describe the bug**

**To Reproduce**
Steps to reproduce the behavior:

1. Create a sample app using CRA (I am using typescript)
2. Run `npx sb init` to setup storyboard
3. Install `@storybook/api` to get `useArgs` hook.
4. Use the code snippet below in the `Button.stories.tsx`.
5. Notice the error on `Hello` component.

```
Storybook preview hooks can only be called inside decorators and story functions.
Error: Storybook preview hooks can only be called inside decorators and story functions.
    at invalidHooksError (http://localhost:6007/vendors~main.38cdb582067630c38066.bundle.js:18317:10)
    at getHooksContextOrThrow (http://localhost:6007/vendors~main.38cdb582067630c38066.bundle.js:18328:11)
    at useStoryContext (http://localhost:6007/vendors~main.38cdb582067630c38066.bundle.js:18521:31)
    at useArgs (http://localhost:6007/vendors~main.38cdb582067630c38066.bundle.js:18549:27)
    at Object.Template (http://localhost:6007/main.86e3cb3589897769072c.hot-update.js:136:96)
    at renderWithHooks (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2546:153)
    at mountIndeterminateComponent (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2831:885)
    at beginWork (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3049:101)
    at HTMLUnknownElement.callCallback (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:70:102)
    at Object.invokeGuardedCallbackDev (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:90:45)
```

**Expected behavior**
It should work

**Screenshots**
<img width="1617" alt="Screen Shot 2020-08-13 at 3 15 15 PM" src="https://user-images.githubusercontent.com/3175035/90192520-f507d780-dd77-11ea-96c7-4a7f4a20801d.png">


**Code snippets**
```
const Template: Story<ButtonProps> = (args) => {

  // removing this works everywhere
  const [_, updateArgs] = useArgs();
  // use hook
  return <Button {...args} />;
};

// works without any issue
export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

// throws error
export const Hello = () => {
  return <Small {...(Small.args as any)} />;
};
```
**System:**
Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 13.10.1 - ~/.nvm/versions/node/v13.10.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v13.10.1/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.5 => 6.0.5
    @storybook/addon-essentials: ^6.0.5 => 6.0.5
    @storybook/addon-links: ^6.0.5 => 6.0.5
    @storybook/client-api: ^6.0.6 => 6.0.6
    @storybook/node-logger: ^6.0.5 => 6.0.5
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.5 => 6.0.5

**Additional context**
Add any other context about the problem here.