title: How to do nested objects in final-form and Material UI (v1)?
body: <p>I want my final forms object on submit to look like this </p>
  
  <pre><code>{
    name : 'kk'
    address: {
        street: '123 abc',
        city: 'sf'
     }
  }
  </code></pre>
  
  <p>How would I do it ? I am aware I can use dot syntax and do the same</p>
  
  <pre><code>&lt;Field name="name" component="input"/&gt;
  &lt;Field name="address.street" component="input"/&gt;
  &lt;Field name="address.city" component="input"/&gt;
  </code></pre>
  
  <p>But I want to allow free form button to add new <code>key: value</code> or remove them, similar to <a href="https://codesandbox.io/s/kx8qv67nk5" rel="nofollow noreferrer">codesandbox example</a></p>
  
  <p>I see an example to do it for arrays I want to do similar but for objects instead of Array. </p>
  
  <p><a href="https://codesandbox.io/s/kx8qv67nk5" rel="nofollow noreferrer">Codebox example link from final form readme</a> . This is an array builder.</p>
  
  <p>I want to make an object builder , just like the above example.</p>
  
  <p>I am using Material UI V1 beta 23
  <a href="https://github.com/final-form/final-form" rel="nofollow noreferrer">Final form</a> and <a href="https://github.com/final-form/react-final-form" rel="nofollow noreferrer">react final form</a> latest versions</p>