title: Add prop dynamically to last element in an array of React components
body: <p>This is a question I've searched everywhere with but I cannot find a resolution, as I can not edit the props object.</p>
  
  <p>So this is what is being done so far. We have a menu. In this menu, we have sub sections. Currently we achieve this doing something like:</p>
  
  <pre><code>const firstSectionItems = [];
  const secondSectionItems = [];
  firstSectionItems.push(
    &lt;MenuItem
      onClick={() =&gt; {}}
    /&gt;,
    &lt;MenuItem
      onClick={() =&gt; {}}
    /&gt;,
    &lt;MenuItem
      onClick={() =&gt; {}}
      sectionEnd
    /&gt;
  );
  secondSectionItems.push(
    &lt;MenuItem
      onClick={() =&gt; {}}
    /&gt;,
    &lt;MenuItem
      onClick={() =&gt; {}}
    /&gt;,
    &lt;MenuItem
      onClick={() =&gt; {}}
      sectionEnd
    /&gt;
  );
  
  const items = [...firstSectionItems, ...secondSectionItems];
  </code></pre>
  
  <p>The sectionEnd prop adds a divider after the menu item to split the sections up in the menu. But what if someone added a menu item? They would have to ensure they move the sectionEnd prop. What I would like to do is add this sectionEnd to the component in the last element of each array. Is this possible? If so, how?</p>