How to clear the MGT PeoplePicker in react hooks SPFx web part?

Question

I need to clear the the PeoplePicker after use.

<PeoplePicker
  selectedPeople={addedMembers}
  selectionMode={"multiple"}
  show-max={50}
  selectionChanged={onPeoplePickerChanged}
/>;

So I set addedMembers to [] but it does not work.

I saw an answer involving ref here but it uses a class and I only know hooks. Anyone can help?

Thank you

Answer 1

See example https://stackblitz.com/edit/react-ts-zayywf?file=App.tsx

make a ref const ppl = React.useRef(null);

add to the <PeoplePicker ref={ppl}

then when you want to clear set the selectedPeople to [] and run ppl.current.focus();

Hope it helps others