Estoy tratando de restablecer AsyncReact ( https://react-select.com/home ) desde un componente principal (ganchos), pero parece que no puedo hacerlo funcionar. Cualquier ayuda muy apreciada.

Puedo restablecerlo desde dentro del componente configurando el estado en una matriz vacía, pero parece que no puedo restablecerlo desde afuera.

Componente principal

 const MessengerMessagesTwo = ({ props }) => { const orgSearchRef = useRef(null); const handleClearOrgSearch = () => { orgSearchRef.current.clearValue(); } return <div> <button onClick={() => handleClearOrgSearch()}>clear</button> <MessengerMessagesTwoOrgSearch ref={orgSearchRef} /> </div> })

Componente hijo

 const MessengerMessagesTwoOrgSearch = forwardRef(({props}, ref) => { const [inputValue, setInputValue] = useState([]); useEffect(() => { setInputValue([]); return () => { setInputValue([]); // reset orgs selected handleOrgSelectedCallback([]); } }, []) return <div> <AsyncSelect isClearable defaultOptions placeholder="Search Orgs" loadOptions={loadOptions} onInputChange={handleInputChange} onChange={handleChange} isMulti noOptionsMessage={i => "Search..."} ref={ref} /> </div> }) const mapStateToProps = (state) => { return { }; }; const mapDispatchToProps = (dispatch) => { return { }; }; export default connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(MessengerMessagesTwoOrgSearch);