title: I have 2 states, but both are updating even though I only setState one of them
body: <p><strong>Problem</strong></p>
  <p>using React, I have a meal, which has an array of ingredients</p>
  <p><code>const [meal, setMeal] = useState()</code></p>
  <pre><code>    meal = {
        foo: ,
        bar: ,
        ingredients: [
          id:
          name:
        ]
      }
  </code></pre>
  <p>I also need to edit the ingredients name, so I have a different state to track it. I have used the spread operator on this.</p>
  <p><code>[changeIngredients, setChangeIngredients] = useState();</code><br>
  // in a separate useEffect<br>
  <code>setChangeIngredients([...meal.ingredients])</code></p>
  <p>The problem starts when I update <code>changeIngredients</code> as such</p>
  <pre><code>  handleEdit = (e) =&gt; {
      let temp = [...changeIngredients];
      temp[e.positionOfArray].name = Number(e.target.value);
      setChangeIngredients(temp);
    };
  </code></pre>
  <p>I find that <code>meal.ingredients</code> is also updated, and as such can't do a comparison to see if anything changed.</p>
  <p>I previously tried using setChangeIngredients with the response.data from an API call, but the results were the same.</p>
  <p><code>setMeal(response.data)</code><br>
  <code>setChangeIngredients([...response.data.ingredients])</code></p>
  <hr>
  Any advice or suggestions will be appreciated