How do i copy a component which has image and text with all its format and styling in React

Question

I have a preview component which renders dynamically:

  <div className={styles.mainPrev}>
        <nav className={styles.dp} style={{margin: `${position.top} ${position.right} ${position.bottom} ${position.left}`, width: `${avatar}px`}} >
            <img src={contact.imageAdd} alt="" style={{borderRadius: `${style}%`}} />
        </nav>
        <section>
            <h2 style={{color: `${color}`,}}>{contact.firstName}  {contact.lastName}</h2>
            <h4><span> {contact.jobTitle} </span> - <span>{contact.companyName}</span></h4>
            <p>Email: <b style={{color: `${color}`, fontFamily: `${font}`, fontSize: `${size}px`}}>{contact.email}</b></p>
            <p>Phone: <b style={{color: `${color}`, fontFamily: `${font}`, fontSize: `${size}px`}}>{contact.phone}</b></p>
            <p>Website: <b style={{color: `${color}`, fontFamily: `${font}`, fontSize: `${size}px`}}>{contact.website}</b></p>
            <p>Address: <b style={{color: `${color}`, fontFamily: `${font}`, fontSize: `${size}px`}}>{contact.address}</b></p>
                {
                    display && ( 
                        <nav className={styles.prevIcons}>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.github}`} id={social.github ? '' : styles.none}><img src={icon1} alt="" /> </a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.behance}`} id={social.behance ? '' : styles.none}><img src={icon2} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.snapchat}`} id={social.snapchat ? '' : styles.none}><img src={icon3} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.pinterest}`} id={social.pinterest ? '' : styles.none}><img src={icon4} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.skype}`} id={social.skype ? '' : styles.none}><img src={icon5} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.linkedIn}`} id={social.linkedIn ? '' : styles.none}><img src={icon6} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.youtube}`} id={social.youtube ? '' : styles.none}><img src={icon7} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.vimeo}`} id={social.vimeo ? '' : styles.none}>
                            <img src={icon8} alt="" />
                            </a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.twitter}`} id={social.twitter ? '' : styles.none}><img src={icon9} alt="" /></a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.facebook}`} id={social.facebook ? '' : styles.none}>
                            <Facebook  sx={{ fontSize: 25, color: '#03132C', borderRadius: '50%'}} />
                            </a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.instagram}`} id={social.instagram ? '' : styles.none}>
                            <Instagram  sx={{ fontSize: 25, color: '#03132C', }} />
                            </a>
                            <a style={{borderRadius: `${shapes}%`, background: `${color}`}} href={`https://${link.slack}`} id={social.slack ? '' : styles.none}>
                            <span className={styles.hash}>#</span>
                            </a>
                        </nav>
                    )
                }
        </section>
    </div>

I want to be able to copy to clipboard all this text and image while maintaining exactly how it appears in the browser i.e with the display flex, color, border, etc

I have tried so far with the following code:

function handleCopy(e) {
let doc = document
let text = doc.getElementById('preview')
let range, selection;

if (doc.body.createTextRange)
{
    range = doc.body.createRange();
    range.moveToElementText(text);
    range.select();
} 

else if (window.getSelection)
{
    selection = window.getSelection();        
    range = doc.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);
}
document.execCommand('copy');
window.getSelection().removeAllRanges();
e.target.textContent = "Copied";
}

But this only copies the text without maintaining the styling and doesn't also copy image (which is updated also dynamically..)