Repository: storybook
Issue: Docs Generation - No inputs found for this component | Typescript | React
Labels: bug,has workaround,block: argstable

**Describe the bug**
I'm trying to get the storybook to auto implement the docs using the `@storybook/addon-docs`. The project consists of react and typescript. So far I have updated the `npx sb upgrade` and added `@storybook/addon-docs` to the `addons` in `main.js`. From the documentation I just expected this to work however I'm seeing `No inputs found for this component. 
Read the docs` when I access the docs page within my storybook application.

I have tried a few things including trying to set `docgen: 'react-docgen-typescript'`

**To Reproduce**
I have an existing storybook app, which has various components.

1. Go to Docs section of a component 

**Expected behavior**
The Docs page should show the correct props

**Screenshots**
![image](https://user-images.githubusercontent.com/25770994/100394511-48571a80-3035-11eb-85c6-8cb6d3829318.png)

**Code snippets**
Current Addons
```  
addons: [
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-viewport/register',
    '@storybook/addon-docs',
 ],
````

Current Packages
```
    ...
    "@storybook/addon-actions": "6.1.7",
    "@storybook/addon-info": "5.3.21",
    "@storybook/addon-knobs": "6.1.7",
    "@storybook/addon-viewport": "6.1.7",
    "@storybook/react": "6.1.7",
   "@storybook/addon-docs": "6.1.7",
   "react": "16.12.0",
   ...
````
Example Story
```
import React, { useState } from 'react';
import { text, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import Checkbox from '.';

export const normal = () => (
  <Checkbox
    id="someId"
    onChange={action('Checkbox changed')}
    checked={boolean('checked', false)}
  >
    {text('children', 'Check Me Out')}
  </Checkbox>
);

export default {
  component: Checkbox,
  title: 'Checkbox',
  decorators: [withKnobs],
};
````

```
interface Props extends InputHTMLAttributes<HTMLInputElement> {
  id: string
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
  checked?: boolean
  name?: string
}
const Checkbox: FC<Props> = ({
  name, id, onChange, checked, children, ...props
}) => (
                <input
                  type="checkbox"
                  id={id}
                  name={name}
                  checked={checked}
                  onChange={(event) => {
                    handleOnChange(event)
                  }}
                />
)

export default Checkbox
````

**System**
```
Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: 6.1.7 => 6.1.7 
    @storybook/addon-docs: ^6.1.7 => 6.1.7 
    @storybook/addon-info: 5.3.21 => 5.3.21 
    @storybook/addon-knobs: 6.1.7 => 6.1.7 
    @storybook/addon-viewport: 6.1.7 => 6.1.7 
    @storybook/react: 6.1.7 => 6.1.7 
````

**Additional context**

The app also uses CSS Modules, not sure if that affects how everything is put together