How to correctly implement Modals from semantic-ui-react library on button clicks?

Question

I'm trying to implement this basic modal from the semantic-ui-react library and want this modal to show up whenever a button is clicked. Below is the code:

const ModalModalExample = () => (
  <Modal trigger={<Button>Show Modal</Button>}>
    <Modal.Header>Select a Photo</Modal.Header>
    <Modal.Content image>
    <Image wrapped size='medium' src='/assets/images/avatar/large/rachel.png' />
      <Modal.Description>
        <Header>Default Profile Image</Header>
        <p>We've found the following gravatar image associated with 
        your e-mail address.</p>
        <p>Is it okay to use this photo?</p>
      </Modal.Description>
      </Modal.Content>
  </Modal>
)

I'm importing this component in another jsx file where I want to use it but only the button shows up and there's no functionality to it:

<span><ModalModalExample/></span>