title: On cancel click not able to set previous data in my react app
body: <p>I have created dynamic fields from JSON data, and I am successfully rendering on UI</p>
  <ul>
  <li>Initially all the fields are disabled.</li>
  <li>Once I click on edit I am making particular row editable which is working fine</li>
  <li>On click of cancel what I want to do is make the fields disabled again  and it should take the previous (initial value)</li>
  </ul>
  <p><strong>Issue</strong></p>
  <p>When I click on cancel I am setting the initial data aging but it is not taking, I am using <code>react-form-hook</code> for form validation, there we have <code>reset()</code> function but that too is not working.</p>
  <p><strong>What I am doing is</strong></p>
  <p>Getting data from main component and setting it to some state variable like below</p>
  <pre><code>    useEffect(() =&gt; {
      if (li) {
        setdisplayData(li);
        setCancelData(li);
      }
    }, [li]);
  </code></pre>
  <ul>
  <li><p>Now using <code>displayData</code> to render the elements</p>
  <p>On click of <code>Edit</code> I am doing this</p>
  <p>const Edit = () =&gt; {
  setdisabled(false);
  };</p>
  </li>
  </ul>
  <p>and on click of cancel I am doing below</p>
  <pre><code>const cancel = () =&gt; {
      setdisabled(true); //disbaled true
      console.log(cancelData);
      setdisplayData(cancelData); setting my main data back to previous one
      reset(); // tried this reset of react hook form but it did not work
    };
  </code></pre>
  <p>I am using <code>defaultValue</code> so that when I click on Edit the field should allow me to edit.</p>
  <p><a href="https://codesandbox.io/s/modest-tdd-w2bil?file=/src/component.js:522-647" rel="nofollow noreferrer">Here is my full working code</a></p>