ListView Control, crashing when setting defaultSelection

Category

[ ] Enhancement

[ ] Bug

[ x ] Question

Version

"@pnp/spfx-controls-react": "1.16.0",

Expected / Desired Behavior / Question

When I add defaultSelection={[2]} to my function, I would expect it to set that as a default index.

export function projectBuilder(parentProps,parentState, theseAreItems: IProject[], _getSelectedProject){

  let viewFields = fields.viewFieldsProject();

  if ( theseAreItems.length === 0 ) { return "";}

  let listView = 
    <ListView
      items={theseAreItems}
      viewFields={viewFields}
      compact={true}
      selectionMode={SelectionMode.single}
      selection={_getSelectedProject}
      showFilter={true}
      defaultSelection={[2]}
      //defaultFilter="John"
      filterPlaceHolder="Search..."
      //groupByFields={groupByFields}
      
    />;

  return listView;

}

Observed Behavior

Steps to Reproduce

If I try to add the defaultSelection property, it crashes. If I remove it, it loads BUT

The initial problem I am trying to resolve is once it's selected and I run the _getSelectedProject, the item gets de-selected (no blue checkmark).

Before trying the defaultSelection, I also tried adding preventDefault to my callback function that also caused an error:

  private _getSelectedProject(items: any[]){

    if (event) { event.preventDefault(); }
    if (items.length === 0 ) { return }

    console.log('Selected items:', items);
    
    let item : IProject;

    for (let p of this.state.projects.newFiltered ) {
      if (p.id === items[0].id) {
        item = p;
      }
    }

    let formEntry = this.state.formEntry;

    formEntry.titleProject = item.titleProject;
    formEntry.projectID1  = item.projectID1;
    formEntry.projectID2  = item.projectID2;
    formEntry.category1  = item.category1;
    formEntry.category2  = item.category2;
    formEntry.leaderId  = item.leaderId;
    formEntry.leader  = item.leader;
    formEntry.team  = item.team;
    formEntry.teamIds  = item.teamIds;
    formEntry.ccEmail  = item.ccEmail;
    formEntry.ccList  = item.ccList;

    this.setState({ formEntry:formEntry, });  

  }

Thanks for any help in figuring out what I'm doing wrong :)

Start by inspecting the ListView component's handling of defaultSelection, selectionMode, and the selection callback shown in the report. Reproduce the crash with defaultSelection={[2]} and then check the callback behavior after selecting an item. Done means the control no longer crashes and the selected item remains visibly selected.