Dropdown doesn't close when item triggers modal and use close button

Question

I have created a Dropdown.Item that, when pressed triggers a modal. If I close the Modal by pressing the Close Icon of the modal, the modal disappears and the dropdown is still open behind it. If I close the modal by clicking outside the modal, both are closed. I would like the dropdown to be closed in both cases.

This is code I created in the semantic sandbox that recreates the issue

import React from 'react'
import { Dropdown, Modal, Button, Icon, Header } from 'semantic-ui-react'

const DropdownExampleDropdown = () => (
  <Dropdown text='File'>
    <Dropdown.Menu>
      <ModalExampleCloseIcon />
      <Dropdown.Item text='Open...' description='ctrl + o' />
    </Dropdown.Menu>
  </Dropdown>
)

const ModalExampleCloseIcon = () => (
  <Modal trigger={<Dropdown.Item text='Details' />} closeIcon>
    <Header icon='archive' content='Archive Old Messages' />
    <Modal.Content>
      <p>
        Your inbox is getting full, would you like us to enable automatic archiving of old messages?
      </p>
    </Modal.Content>
    <Modal.Actions>
      <Button color='red'>
        <Icon name='remove' /> No
      </Button>
      <Button color='green'>
        <Icon name='checkmark' /> Yes
      </Button>
    </Modal.Actions>
  </Modal>
)

export default DropdownExampleDropdown

If you click on the "File" dropdown and then on "Details", a modal will appear. Pressing on the X in the modal closes the modal, but the "Details" and "Open.." options of the dropdown is still visible. If you click the "Details" button and then click outside the modal, the modal disappears and the dropdown closes. You see the "File" dropdown as it originally appeared, which is what I would like to see in both cases.