以编程方式更改反应选择组件的值

我在React应用程序中大量使用react-select组件。我创建了一个包装器组件，该组件使我可以指定一个用例，在该用例中希望所选值在选择时重置。

我的组件包装器定义为：

import React, { useRef } from 'react';
import Select from 'react-select'
export const SelectComponent = (props) => {
    const selectRef = useRef(null);

    const valueSelected = (item) => {
        if (!item || item.value === props.selectedValue) {
            return;
        }

        if (props.resetOnSelect) {
            selectRef.current.select.clearValue();
        }
        props.onValueSelected(item);
    }

    return <div className="modal-form-row">
        <Select ref={selectRef} options={props.options} onChange={valueSelected} id={props.id} isClearable={true} isSearchable={true} placeholder={props.label} value={props.selectedValue} />
    </div>;
}

这是组件被引用的方式：

const options = [
    { label: 'Item1', value: '1' },
    { label: 'Item2', value: '2' },
    { label: 'Item2', value: '2' },
];
<SelectComponent id="select-list" label="Pick an Item" options={options} onValueSelected={this.handleNewItem} value="" resetOnSelect={true} />

它似乎正在工作，因为valueSelected第二次使用空参数调用了我的处理程序，但是select组件本身并未重新呈现，而是显示了用户的选择。关于下一步应该尝试的任何想法？