Detail List unselect the element programmatically

[mohamed-isak]

Problem:

I have 2 Component child Component have a detail list I want to send the selection object to parent Component.
parent component have button to unselect the particular element using selection object ref. how to do that unselect the particular element? using custom button?

`
// ComponentA Have unselection button I want to unselect the particular element
function componentA(){
  var selection;
   // unselection from parent component
     const unSelect = (Obselection)=>{
  // set selection reference to local variable
     selection = Obselection;
  } 
return (
<>
<Button onClick={()=>{selection.setItems([],true)}}>Unselect Element</Button>
  <ComponentB unSelect={unSelect}/>
</>
)
}

// ComponentB Have a selection object
function ComponentB({unSelect}){
     const selection = new Selection();
  useEffect(()=>{
    unSelect(selection);
},[])
return (
        <DetailsList
            items={items}
            columns={this._columns}
            setKey="set"
            layoutMode={DetailsListLayoutMode.justified}
            selection={this._selection}
            selectionPreservedOnEmptyClick={true}
            ariaLabelForSelectionColumn="Toggle selection"
            ariaLabelForSelectAllCheckbox="Toggle selection for all items"
            checkButtonAriaLabel="select row"
            onItemInvoked={this._onItemInvoked}
          />
)
}`