How to clear PnP PeoplePicker control in SPFx webpart?

Question

I am trying to clear PnP People piker control programmatically in SharePoint online spfx webpart, I am using a simple form with save and cancel button, which save data in List, on the Cancel button I want to clear PeoplePicker value

<PeoplePicker
   context={this.props.context}
   personSelectionLimit={1}
   groupName=""
   showtooltip={false}
   onChange={(value) => this.getPeoplePickerItems(value, "col")}
   showHiddenInUI={false}
   defaultSelectedUsers={this.state.ApprovarSelected}
   principalTypes={[PrincipalType.User]}
   ensureUser={true}
   />
        

OnChange Event

private getPeoplePickerItems(items: any[], col) {
    if (items.length > 0) {
      this.state.ListItem.Approvar = { id: items[0].id, secondaryText: items[0].secondaryText, text: items[0].text };
    }
    else {
      this.state.ListItem.Approvar = { id: '', secondaryText: '', text: '' };
    }
  }

Cancel button

public onClickCancel() {
this.setState({ ApprovarSelected:[]});
}

I am changing state while clicking on the Cancel button, but somehow it is not working, can anyone help me with this?

Thanks.

Answer 1

I got the solution, Add ref={c => { this.ppl = c }} in PeoplePicker control and write below code on cancel button.

this.ppl.onChange([]);

It works for me.