title: Editing single item in useFieldArray
body: <p>I'm using and loving <code>react-hook-form</code>. I've run across an issue where I have a list of items (let's say in the left column), then when you click on any item it will display an edit component for the selected item in the right column. The issue is when I switch between items, <em><strong>nested array values</strong></em> don't seem to update the data correctly.</p>
  <p>I think I understand that because a new edit component isn't created for each parent item (I'm just passing the selected index down) the nested <code>useFieldArray</code> in the edit component still references the first parent item. If that's the case, I'm not exactly sure how to make sure a new <code>useFieldArray</code> is created for each item that gets selected.</p>
  <p>Here's a codesandbox replicating the issue:</p>
  <p><a href="https://codesandbox.io/s/dreamy-brattain-r74lx" rel="nofollow noreferrer">https://codesandbox.io/s/dreamy-brattain-r74lx</a></p>
  <p>Any help is much appreciated.</p>