title: React property is an empty object instead of intended array
body: <p>I'm trying to implement a <code>GroupedList</code> from the Office UI Fabirc control library and I'm not too far off from the demo code <a href="https://developer.microsoft.com/en-us/fabric#/controls/web/groupedlist" rel="nofollow noreferrer">here</a>.  For some reason, when passing the items array into the function component I have built through the props (TimeDisplay), I'm losing the list.  I get an empty Javascript object for the <code>itemsArray</code> parameter instead of the dummy array that was set up in the calling "Home" compoment.  Why don't I get my little array?  I'm guessing this is just me missing something about the way React works, but I would appreciate any insight.</p>
  
  <p><strong>Relevant Code</strong></p>
  
  <p>Home.tsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import { TimeSubmitter } from './TimeSubmitter'
  import { TimeDisplay, TimeEntry } from './TimeDisplay'
  
  type HomeProps = {
  
  }
  
  export class Home extends Component&lt;HomeProps&gt; {
    static displayName = Home.name;
    private items: TimeEntry[] = new Array&lt;TimeEntry&gt;();
  
    constructor(props: HomeProps){
      super(props);
      this.items.push(
        {
          client: "Apple",
          hours: 1,
          timeCode: "MD",
          loggedDate: new Date()
      });
    }
  
    render () {
      return (
        &lt;div&gt;
          &lt;TimeDisplay title="Time Logged this Period" items={this.items} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>TimeDisplay.tsx</p>
  
  <pre><code>import React, { FunctionComponent, useState } from 'react'; 
  import { GroupedList, IGroup } from 'office-ui-fabric-react/lib/GroupedList';
  import { IColumn, DetailsRow } from 'office-ui-fabric-react/lib/DetailsList';
  import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
  import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
  
  type TimeDisplayProps = {
      title: string,
      items: TimeEntry[]
    }
  export type TimeEntry = {
      client: string,
      hours: number,
      timeCode: string,
      loggedDate: Date
  }
  
  const buildGroups = (items: Array&lt;TimeEntry&gt;) =&gt; {
      let groups = new Array&lt;IGroup&gt;();
      let hashSet = new Set&lt;string&gt;();
      for (let index = 0; index &lt; items.length; index++) {
          const element = items[index];
          if(!hashSet.has(element.client)){
              groups.push({
                  key: element.client,
                  name: element.client,
                  startIndex: 0,
                  count: 10
              });
              hashSet.add(element.client);
          }
        }
        return groups;
      }
  
  const buildColumns = (item: TimeEntry[]) =&gt; {
      return (Object.keys(item)
        .map(
          (key: string): IColumn =&gt; ({
            key: key,
            name: key,
            fieldName: key,
            minWidth: 300
          })
        ));
  }
  
  export const TimeDisplay: FunctionComponent&lt;TimeDisplayProps&gt; = (title, itemsArray) =&gt;{
      const [items, setItems] = useState(itemsArray);
      const [selection, setSelection] = useState(new Selection());
      const [groups, setGroups] = useState(buildGroups(itemsArray));
      const [columns, setColumns] = useState(buildColumns(itemsArray[0]));
  
      const onRenderCell = (nestingDepth?: number | undefined, item?: any, index?: number | undefined) =&gt; {
          if(nestingDepth != undefined &amp;&amp; index != undefined){
              return (
                  &lt;DetailsRow
                    columns={columns}
                    groupNestingDepth={nestingDepth}
                    item={item}
                    itemIndex={index | 0}
                    selection={selection}
                    selectionMode={SelectionMode.multiple}
                    compact={false}
                  /&gt;);
          }
      }
  
      return (        
      &lt;FocusZone&gt;
          &lt;SelectionZone selection={selection} selectionMode={SelectionMode.single}&gt;
            &lt;GroupedList
              items={items}
              onRenderCell={onRenderCell}
              selection={selection}
              selectionMode={SelectionMode.single}
              groups={groups}
            /&gt;
          &lt;/SelectionZone&gt;
        &lt;/FocusZone&gt;);
  }
  </code></pre>