Repository: storybook
Issue: Problem with storybook-controls of type "select"
Labels: bug,help wanted,typescript,addon: controls,block: argstable,:dollar: Funded on Issuehunt

**### Bug or support request summary**

Let's assume React component MyComponent.tsx (code below) and it's story file MyComponent.stories.tsx (code below). There also is customObject.ts (code below) consisting of 29 key-value pairs (this number is important).

In MyComponent.tsx there is optional property called "myProperty" which is of type "keyof typeof customObject".

What I expected was that controls in the documentation for that property would be of type select. 

What happens instead is that control is of type object (?), see screenshot below
![image](https://user-images.githubusercontent.com/23616865/94794074-ab348880-03db-11eb-9cf1-f11a3a516040.png)
Ps. don't be mislead by "show 18 more", there is actually 29 possible values.

I mentioned that length of this object (29) is important. For some reason, when i comment one of the options (so for objects of length <= 28), this works as expected. (control is of type select).
![image](https://user-images.githubusercontent.com/23616865/94794630-707f2000-03dc-11eb-9a1c-f82370359dfe.png)

Another little 'bug' is that once you select on of the options, you can't go back to myProperty being undefined. 

I've also checked this for scenario where myProperty is mandatory property, and It was all right. Even for much larger objects control was always of type "select".
### Steps to reproduce

Just add MyComponent.tsx, MyComponent.stories.tsx and customObject.ts to your project and you can see it for yourself. Code below

### Please specify which version of Storybook and optionally any affected addons that you're running

- @storybook/react v6.0.21
- @storybook/addon-controls v6.0.22

### Code Snippets (Optional)
MyComponent.tsx
```tsx
import React from "react";
import { customObject } from "../utilities/customObject";

export interface MyComponentProps {
  myProperty?: keyof typeof customObject;
}

export const MyComponent: React.FC<MyComponentProps> = ({ myProperty }) => {
  return <div>{myProperty ? customObject[myProperty] : "I'm undefined"}</div>;
};
```

MyComponent.stories.tsx
```tsx
import { Meta, Story } from "@storybook/react/types-6-0";
import React from "react";
import { MyComponent, MyComponentProps } from "../components/MyComponent";

export default {
  title: "MyComponent",
  component: MyComponent,
} as Meta;

export const MyComponentExample = (args: Story<MyComponentProps>) => {
  return (
    <div>
      <MyComponent myProperty="k1" {...args} />
    </div>
  );
};
```

customObject.ts
```ts
export const customObject = {
  k1: "I'm option 1",
  k2: "I'm option 2",
  k3: "I'm option 3",
  k4: "I'm option 4",
  k5: "I'm option 5",
  k6: "I'm option 6",
  k7: "I'm option 7",
  k8: "I'm option 8",
  k9: "I'm option 9",
  k10: "I'm option 10",
  k11: "I'm option 11",
  k12: "I'm option 12",
  k13: "I'm option 13",
  k14: "I'm option 14",
  k15: "I'm option 15",
  k16: "I'm option 16",
  k17: "I'm option 17",
  k18: "I'm option 18",
  k19: "I'm option 19",
  k20: "I'm option 20",
  k21: "I'm option 21",
  k22: "I'm option 22",
  k23: "I'm option 23",
  k24: "I'm option 24",
  k25: "I'm option 25",
  k26: "I'm option 26",
  k27: "I'm option 27",
  k28: "I'm option 28",
  k29: "I'm option 29",
};

```