semantic ui react modal

1import React from 'react'
2import { Button, Header, Image, Modal } from 'semantic-ui-react'
3
4function ModalExampleModal() {
5  const [open, setOpen] = React.useState(false)
6
7  return (
8    <Modal
9      onClose={() => setOpen(false)}
10      onOpen={() => setOpen(true)}
11      open={open}
12      trigger={<Button>Show Modal</Button>}
13    >
14      <Modal.Header>Select a Photo</Modal.Header>
15      <Modal.Content image>
16        <Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />
17        <Modal.Description>
18          <Header>Default Profile Image</Header>
19          <p>
20            We've found the following gravatar image associated with your e-mail
21            address.
22          </p>
23          <p>Is it okay to use this photo?</p>
24        </Modal.Description>
25      </Modal.Content>
26      <Modal.Actions>
27        <Button color='black' onClick={() => setOpen(false)}>
28          Nope
29        </Button>
30        <Button
31          content="Yep, that's me"
32          labelPosition='right'
33          icon='checkmark'
34          onClick={() => setOpen(false)}
35          positive
36        />
37      </Modal.Actions>
38    </Modal>
39  )
40}
41
42export default ModalExampleModal