title: Getting selected items in Fluent UI DetailsList
body: <p>I am using <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic" rel="noreferrer">Fluent UI DetailsList</a>. In the example the component is implemented as a class component but I am using a functional component.</p>
  
  <p>I am having difficulties in getting the selected items, I assume and think my implementation is incorrect. The problem is I do not get ANY selected items.</p>
  
  <pre><code>export const JobDetails = () =&gt;  {
      const { actions, dispatch, isLoaded, currentTabJobs, activeTabItemKey } = useJobDetailsState()
  
      let history = useHistory();
  
      useEffect(() =&gt; {
          if (actions &amp;&amp; dispatch) {
              actions.getJobListDetails()
          }
      }, [actions, dispatch])
  
      const getSelectionDetails = (): string =&gt;  {
          let selectionCount = selection.getSelectedCount();
  
          switch (selectionCount) {
              case 0:
                  return 'No items selected';
              case 1:
                  return '1 item selected: ' + (selection.getSelection()[0] as any).name;
              default:
                  return `${selectionCount} items selected`;
          }
      }
  
      const [selectionDetails, setSelectionDetails] = useState({})
      const [selection, setSelection] = useState(new Selection({
          onSelectionChanged: () =&gt; setSelectionDetails(getSelectionDetails())
      }))
  
      useEffect(() =&gt; {
          setSelection(new Selection({
              onSelectionChanged: () =&gt; setSelectionDetails(getSelectionDetails())
          }))
      },[selectionDetails])
  
      return (
          &lt;div&gt;
              &lt;MarqueeSelection selection={selection}&gt;
                  &lt;DetailsList
                      items={currentTabJobs}
                      groups={getGroups()}
                      columns={_columns}
                      selection={selection}
                      selectionPreservedOnEmptyClick={true}
                      groupProps={{
                          onRenderHeader: props =&gt; {
                              return (
                                  &lt;GroupHeader 
                                      {...props} 
                                      selectedItems={selection}
                                  /&gt;
                              )
                          },
                          showEmptyGroups: true
                      }}
                  /&gt;
              &lt;/MarqueeSelection&gt;
          &lt;/div&gt;
      )
  }
  
  export default JobDetails;
  </code></pre>