It's the same like with all components in React:

• Import it: import UpdateUserModal from "./UpdateUserModal";
• Call it: <UpdateUserModal />

Look into following sandbox for a quick example: https://codesandbox.io/s/divine-water-7sofms

Update your UpdateUserModal.js with this.

import {Modal} from 'react-bootstrap'

const UpdateUserModal = (props) => {
const {show, handleClose, handleShow} = props


  return (
    <div>
        <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

export default UpdateUserModal

Now, wherever you wish to use this modal, create this state and function there:

const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

Now on your edit button where you want this, update you state from button click,

onClick={()=> handleShow()}

and then import and call:

import UpdateUserModal from "./UpdateUserModal";
<UpdateUserModal show={show} handleClose={handleClose} handleShow={handleShow}/>