title: React - Changing the state of an array doesn't render correctly
body: <p>I'm trying to add data to an array in various indexes depending on which element the user clicks on, but the last element of the array keeps getting re-rendered. </p>
  
  <p>I believe the problem initiates from the array elements being rendered in a separate component and returned to the main component that contains the state.</p>
  
  <p><strong><a href="https://codesandbox.io/s/vyx95280y" rel="nofollow noreferrer">Here</a> is the example code that basically encapsulates the problem.</strong></p>
  
  <p>State (which is correct): </p>
  
  <p><a href="https://i.stack.imgur.com/FcB0A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FcB0A.png" alt="enter image description here"></a></p>
  
  <p>What actually gets rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/hbUVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hbUVg.png" alt="enter image description here"></a></p>