title: How to update an array by index using the useState hook?
body: <p>I have a select component that I would like to use to update the values of an array of objects based on the index.</p>
  <p><strong>I use the hook like this:</strong></p>
  <pre><code>const [areas, setAreas] = useState(product.areas);
  </code></pre>
  <p><strong>This returns the following for &quot;areas&quot;:</strong></p>
  <pre><code>[
    0: {de: &quot;Getraenke&quot;, en: &quot;Drinks&quot;},
    1: {de: &quot;Snacks&quot;, en: &quot;Snacks&quot;}
  ]
  </code></pre>
  <p><strong>My select component looks like this:</strong></p>
  <pre><code>{areas?.map((area: {de: string, en: string}, index: number) =&gt; (
    &lt;Wrapper key={index}&gt;
      &lt;Select
        label=&quot;Area&quot;
        name=&quot;product-area&quot;
        value={area[lang] || ''}
        onChange={e =&gt; setArea([...area, { [lang]: e.target.value }])}
      &gt;
        {areaOptions.map(option =&gt; (
          &lt;option value={option} key={option}&gt;
            {option}
          &lt;/option&gt;
        ))}
      &lt;/Select&gt;
    &lt;/InputWrapper&gt;
  ))}
  </code></pre>
  <p><strong>In this way I unfortunately get the following for &quot;area&quot; after selecting an option (here &quot;Sweets&quot;):</strong></p>
  <pre><code>[
    0: {de: &quot;Getraenke&quot;, en: &quot;Drinks&quot;},
    1: {de: &quot;Snacks&quot;, en: &quot;Snacks&quot;}
    2: {en: &quot;Sweets&quot; }
  ]
  </code></pre>
  <p>So the first object of the array is not updated as intended, but a further object is appended, which unfortunately also lacks the &quot;de&quot; language.</p>
  <p><strong>My goal is to update the first object (or the object based on the index of the select component) of the array so that instead of:</strong></p>
  <pre><code>  0: {de: &quot;Getraenke&quot;, en: &quot;Drinks&quot;}
  </code></pre>
  <p>..the updated object looks like this:</p>
  <pre><code>  0: {de: &quot;Suessigkeiten&quot;, en: &quot;Sweets&quot;}
  </code></pre>
  <p>The objects within the array should therefore be updated based on the index of the current select component and also take into account the selected language (default &quot;en&quot;).</p>