title: How to handle nested elements in hooks?
body: <pre><code>const [mealData, setMealData] = useState({
  title: '',
  description: '',
  category: '',
  price: '',
  mealIMG: null,
  ingredients: [],
  })
  </code></pre>
  <p>So i have this state object in my component.
  When i click on add button the state becomes like this:
  (let's say we clicked twice)</p>
  <pre><code>{
  title: '',
  description: '',
  category: '',
  price: '',
  mealIMG: null,
  ingredients: [
          {ingredient:&quot;&quot;, qty:&quot;&quot;, unit:&quot;&quot;, id:id},
          {ingredient:&quot;&quot;, qty:&quot;&quot;, unit:&quot;&quot;, id:id},
    ],
  }
  </code></pre>
  <p>Now on the change event handler i want to update the state without mutating the other i am using this function to achieve the work but it's not working:</p>
  <pre><code>const handleIngredients = (e, index) =&gt; {
    const { name } = e.target
    setMealData((prev) =&gt; {
      return {
        ...prev,
        ingredients: [
          {
            ...prev.ingredients[index],
            [name]: e.target.value,
          },
        ],
      }
    })
  }
  </code></pre>
  <p>Any clue please?</p>