React-select кнопка "Сбросить все" не работает

Решил использовать библиотеку react-select, задача такова, есть калькулятор, где несколько select. И никак не могу настроить кнопку "Сбросить все", чтобы все значения обнулились. Нашел пример, для одного select, но когда их много, прописывать каждому уникальные значения не релевантно

handleChange должен обрабатывать изменения, а handleClick занулять, change Вроде работает нормально, а вот при клике ничего не происходит, хотя если посмотреть в консоли, то сам объект сбрасывается

  const [value,setValue] = useState({})

  const handleChange = (val,name) => {
    const newValue = {
      ...value,
      [name]: val
    }
    setValue(newValue)
  }

      const handleClick = () => setValue({})


       <div className={classes.field}>
            <div className={classes.subtitle}>Язык</div>
            <CustomSelect propValue={value['string'] || null} onChange={handleChange} name={'string'} id={1}  placeholder={'На каком языке?'} styles={customStyles}/>
            {JSON.stringify(value)}
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Страна</div>
            <CustomSelect  propValue={value['2'] || null} onChange={handleChange} name={'2'} id={2} placeholder={'На каком языке?'} styles={customStyles}/>
          </div>

Компонента CustomSelect

   export const CustomSelect = ({placeholder,id,propValue,onChange, options, styles,name}) =>{
  const initialOptions = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
  ];
  const [value,setValue] = useState(propValue)
  useEffect(()=>{
    setValue(propValue)
  }, [propValue])

  const handleOnChange = ({value}) => {
    if (typeof onChange ==='undefined') {
      return null
    } else {
      onChange(value, name)
    }
  }
  return (
    <Select onChange={handleOnChange} name={name} value={value} instanceId={id} placeholder={<span>{placeholder}</span>}  styles={styles || customStyles} options={options ?? initialOptions} />
  )
}

Ответы (0 шт):