title: ReactJS - Duplicated objects in state array remain linked
body: <p>I've reproduced the issue in the following codesandbox:
  <a href="https://codesandbox.io/s/unruffled-danilo-mbb0e?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/unruffled-danilo-mbb0e?file=/src/App.js</a></p>
  <p>I have a state array of objects <code>[{name:&quot;Tom&quot;},{name:&quot;Dick&quot;},{name:&quot;Harry&quot;}]</code>.
  I want to be able to duplicate the object present at a specific index in the array. I've provided a button &quot;Duplicate&quot; to do so in the sandbox.</p>
  <p>Follow the following steps in the sandbox to recreate the issue:</p>
  <ol>
  <li>Click Duplicate under &quot;Dick&quot; to duplicate the Dick object in the state array</li>
  <li>Now click &quot;change&quot; under one of the two Dicks. Notice that my code only changes one &quot;Dick&quot; object in the state array, but the other duplicate one automatically gets changed.</li>
  </ol>
  <p>I want to avoid this. I don't want the two Dick objects to remain linked forever. How do I do this?</p>