title: My React state does not update using useState hook with a slightly complexer object
body: <p>In my React app I purposely combined several arrays in one state using a useState hook. These arrays represent visual objects that I would like to keep &quot;managed&quot; together to ensure that that re-renderings of my application are visually consistent.</p>
  <p>While testing I tried to change a property of some objects of my first array. <code>updatedElements</code> reflects the update properly (clearly shown by my console-log). However, updating my useState state does not work. The array <code>elements</code> does not change at all.</p>
  <p>Here is the relevant code:</p>
  <pre class="lang-tsx prettyprint-override"><code>const updatedElements: VisualDiagramElementData[] =
    visualData.elements.map((element: VisualDiagramElementData) =&gt;
      element.id === id
        ? { ...element, selected: true }
        : { ...element, selected: false }
    );
  
  console.log(updatedElements);
  
  setVisualData({
    elements: updatedElements,
    connectors: visualData.connections,
    connections: visualData.connections,
  });
  </code></pre>
  <p>What am I missing / doing wrong? Any help is highly appreciated!</p>