Sugiero usar una tecla React para "restablecer" la entrada no controlada. Cuando la clave de React cambie, React desechará la versión anterior y montará una nueva "instancia".

Vea el componente totalmente descontrolado con una clave de ejemplo y una explicación más detallada.

 const [key, setKey] = useState(false); ... const handleClearfilter = () =>{ setStartDate(""); setEndDate(""); setKey(k => !k); // toggle React key value } <DateRangePickerComponent key={key} // <-- attach React key placeholder='Select a range' change={onChangedate} style={{paddingTop: 10, fontSize: 16}} />

Si desea controlar el componente, debe introducir los valores usted mismo. Los documentos muestran que necesita dos valores de fecha ya que es una entrada de rango de datos.

 const [startdate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const onChangedate = (e) => { let startDate = convertDate(e.startDate); let endDate = convertDate(e.endDate); setStartDate(startDate); setEndDate(endDate); }; const handleClearfilter = () =>{ setStartDate(""); setEndDate(""); } <DateRangePickerComponent placeholder='Select a range' change={onChangedate} startDate={startDate} endDate={endDate} style={{paddingTop: 10, fontSize: 16}} /> <Button onClick={handleClearfilter} > Clear All </Button>