Закрытие модального интерфейса React Semantic с кнопкой и значком закрытия

У меня есть модальный режим, в котором пользователю нужно заполнить некоторые формы и сохранить все, что было заполнено, с помощью кнопки в модальном окне. Когда пользователь сохраняет, я бы хотел, чтобы модальное окно закрывалось. Я могу сделать это, используя реквизит open для компонента Modal. Но если я это сделаю, модальное окно не закроется, когда я попытаюсь сделать это через closeIcon.

Что я могу сделать, чтобы пользователь мог закрыть модальное окно обоими способами?

Вот мой текущий модальный код:

  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      <Modal closeIcon closeOnDimmerClick open={showModal} trigger={<Button onClick={() => this.setState({showModal: true})}><Icon className='plus'/>New Challenge</Button>}>
        <Modal.Header>My Modal</Modal.Header>
        <Modal.Content>
          <Form>
            <Form.Input
              label='Something'
              value={something}
              onChange={(evt) => this.handleChangeForms('something', evt.target.value)}
            />
            <Button onClick={(evt) => this.handleCreateButton(evt)}>Save</Button>
          </Form>
        </Modal.Content>
      </Modal>
    )
  }