Очистить выбранную опцию и показать заполнитель после отправки формы

У меня есть форма, в которой используется реакция-выбор, и я пробовал много способов удалить выбранное значение из поля после отправки формы. Я хочу, чтобы он отображал текст заполнителя после успешной отправки, но я не мог заставить его работать. После отправки он по-прежнему показывает мне вариант, который я выбрал перед отправкой. Способ, который я показываю вам здесь, заключается в установке состояния значения реакции-выбора на ''. Я также пытался установить пустой массив, не работал. Где ошибка?

Это в моем файле контейнера

import * as downloadedArray from '......the file that have the fixed options'
constructor(props) {
    super(props);
    this.state = ({
      val: '',
    })
  }

handleSubmit = event => {
  event.preventDefault()
......post to server......
  .then(()=> {
      this.setState({val: ''})
  }   

}

<SelectComponent select_id='select_id' select_options={downloadedArray} select_placeholder='Choose an option' handle_change={this.handleChange} val={this.state.val} />

Это мой выбранный компонент в другом файле

const SelectComponent = ({select_id, select_options, handle_change, select_placeholder, val}) => (
  <div className='pl1 pl4-l pl2-m pr1 pr4-l pr-2-m pt1 pt4-l pt2-m pb2 pb3-l'>
    <Select id={select_id} name={select_id} options={select_options} onChange={handle_change} placeholder={select_placeholder} value={val} isClearable />
  </div>
)