copy text and image at once

Question

I'm stuck with Copy and paste. I want to copy the content inside the modalBody below.

Here is my condition

1. Some Text with an image file that is consist of some byte.
2. click a button to copy them <----(this is what I want to do)

Is there any way to select them all and copy them?

Please give me some advice to solve this issue.

...
...


  useEffect(() => {
    axios
      .get(`api/v1/download_mms?id=4226`)
      .then((res: any) => {
        console.log('The response: ', res);

        if (res.data.code === 200) {
          setDetailData(res.data.data);
        } else {
          alert('error');
        }
      })
      .finally(() => {});
  }, []);

  return (
    <CModal show={modal} onClose={() => setModal(!modal)} size="">
      <CForm>
        <Detail>
          <CModalHeader>
            <CModalTitle>barCode Info </CModalTitle>
          </CModalHeader>

          <CModalBody>
            <div>
              <text>{detailData.box_barcode}</text>

              <img
                //detailData.byteImage
                src={`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJsAAAABAQAAAADh5+EEAAAAHklEQVR42mP4mZySrqo8eyOX58mZxmo5qdPnBD8AAFxECQFLyfS0AAAAAElFTkSuQmCC`}
              />
            </div>
          </CModalBody>

          <CModalFooter>
            <CButton color="primary" onClick={() => copyTheModalBodyInfo()}>
              clck to Copy
            </CButton>

            <CButton color="primary" onClick={() => setModal(!modal)}>
              Close
            </CButton>
          </CModalFooter>
        </Detail>
      </CForm>
    </CModal>
  );
}