I am trying to reset AsyncReact (https://react-select.com/home) from a parent component (Hooks) but I cant seem to get it to work. Any help much appreciated.

I can reset it from within the component by setting the state to an empty array but I cant seem to reset it from outside.

Parent Component

const MessengerMessagesTwo = ({ props }) => {
    
   const orgSearchRef = useRef(null);

   
   

 const handleClearOrgSearch = () => {
        orgSearchRef.current.clearValue();
    }

 return <div>

 <button onClick={() => handleClearOrgSearch()}>clear</button>

 <MessengerMessagesTwoOrgSearch ref={orgSearchRef} />
</div>
})

Child Component

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);