title: How do I use react-hook-form when mapping?
body: <p>So I am using React and Material UI. Basically, in my state I have an array of objects that looks like this:</p>
  <pre><code>[{ title: string, url: string, id: string },...];
  </code></pre>
  <p>On my page I want the user to be able to edit these so I've set up the page like so:</p>
  <pre><code> const links = useSelector((state: RootState) =&gt; { state.links });
   const onEdit = (data: { title: string, url: string }) =&gt; console.log(data);
  
   {links.map((link) =&gt; (
      &lt;form onSubmit={handleSubmit(onEdit)} key={link.id}&gt;
        &lt;Grid container &gt;
  
          &lt;Grid item xs={5}&gt;
            &lt;TextField
              name=&quot;title&quot;
              defaultValue={link.title}
              type=&quot;text&quot;
              inputRef={register({
                required: {
                  value: true,
                },
              })}
            /&gt;
          &lt;/Grid&gt;
  
          &lt;Grid item xs={5}&gt;
            &lt;TextField
              name=&quot;url&quot;
              defaultValue={link.url}
              type=&quot;url&quot;
              variant=&quot;outlined&quot;
              inputRef={register({
                required: {
                  value: true,
                },
              })}
            /&gt;
          &lt;/Grid&gt;
  
          &lt;Button
            className={styles.button}
            type=&quot;submit&quot;
            data-testid=&quot;submit-button&quot;&gt;
            Edit
          &lt;/Button&gt;
  
          &lt;Button
            onClick={() =&gt; {
              onDelete(link.id);
            }}
            data-testid=&quot;delete-button&quot;&gt;
            Delete
          &lt;/Button&gt;
  
        &lt;/Grid&gt;
      &lt;/form&gt;
    ))}
  </code></pre>
  <p>So let's say I have the following in my state:</p>
  <pre><code>[{ title: 'google', url: 'google.com', id: '123' }, { title: 'YouTube', url: 'YouTube', id: '456' }, { title: 'Facebook', url: 'Facebook', id: '789' }]
  </code></pre>
  <p>The react component will render the values of these into the textfields and the user can directly change it and click edit to update the state.</p>
  <p>The problem is when I try to click the edit button for any of the forms rendered, it always consoles <code>{ title: 'Facebook', url: 'Facebook' }</code> whereas I want it to console the values depending on which form's edit button is clicked.</p>
  <p>Hopefully that was clear, thanks!</p>