title: React - State array deleting last item in array instead of specified index
body: <p>I have an array state filled with objects called items: </p>
  
  <pre><code>    const [items, setItems] = useState([{name: "", toppings: []}])
  </code></pre>
  
  <p>However when I try to delete a specified index with this function: </p>
  
  <pre><code>const removeItem = (index) =&gt; {
      setItems(items.filter((item, i) =&gt; i !== index))
      areItemsCompleted()
  }
  </code></pre>
  
  <p>It works when I print the elements to the console <strong>outside of the function</strong>, however the item is not rendering properly.  It only removes the last element of the array from the jsx but the <code>items</code> array has the correct values.  I read somewhere that react only checks for changes in state shallowly so it does not check the content of the object it is deleting.  However, I am unsure as to why it shows up in the console that <code>items</code> have the correct value but the components arent rendering the correct data.  (Instead it renders the same data except for the last element in <code>items</code>).  </p>
  
  <p>I have tried multiple ways of deleting elements from my array such as </p>
  
  <pre><code>const removeItem = (index) =&gt; {
      let arr = [...items]
      arr.splice(index, 1)
      setItems(arr)
      areItemsCompleted()
  }
  </code></pre>
  
  <p>How would I delete an element from my array full of objects and render the proper data?</p>