title: argTypes in nested object for controls
body: <p>I'm trying to migrate from Knobs to Controls and I am having trouble with nested objects.</p>
  <p>As an example, lets say I have an object like this as props for a Component...</p>
  <pre><code>object : {
   properties: {
     color: 'black',
     size: '1'
   }
  }
  </code></pre>
  <p>The project uses .tsx extensions for story files, no MDX as of now. I've tried accessing the nested properties like this to customize their Control...</p>
  <pre><code>Card.argTypes = {
   object: {
    properties: {
     color: {control: {type: 'color'}},
     size: {control: {type: 'range', options:{min:1,max:5,step:1}}}
    }
   }
  }
  </code></pre>
  <p>But the control remains an object field with the entirety of the JSON right in there, which is not user friendly, you might agree.</p>
  <p>Is there a way to access objects to give control over their nested properties? Given the size of the project, I can't go around flattening all the objects and their props in the components.</p>
  <p>Thanks!</p>