'react select reset input

I'm using react select and i want to reset the input with reset button. The selected value return undefined but the option still appear in the box. I want when click in the reset button clear the selected option . My Select component :

import React from "react";
import ReactSelect from "react-select";

const Select = ({
    name,
    options,
    value,
    className,
    isMulti,
    onChange,
    
}) => {
    let defaultValue;
    if (!Array.isArray(value) && (value || value == "")) {
        for (let { value: val, label } of options) {
            if (val == value) {
                defaultValue = { value, label };
                break;
            }
        }
    } else {
        defaultValue = value;
    }

   

    let props = {
        inputId: name + "-input",
        id: name,
        name,
        options,
        defaultValue,
    };


        return (
            <ReactSelect
                onChange={onChange}
                {...props}
            />
        );
    
};

export default Select;

I call this component in my form

import React,{useState} from "react";
 funtion Form (){
  const [values,setValues] = useState({});
return (
<div>
 <Select
                            options={options}
                            value={values.color}
                            
                            onChange={(e) => {
                                setValues({ ...values, color: e});
                            }}
                        />
<button onClick={()=> setValues({})}></button>
</div>

)

}

Any help please.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source