Cannot print image about react-to-print HOT 12 CLOSED

return (  
            <div className='animated fadeIn'>  
              <ReactToPrint
                trigger={() => <a href="#">Print this out!</a>}
                content={() => this.componentRef}
              />
                <div className='email-app mb-4' ref={el => (this.componentRef = el)}>
                    <main className='message'>
                        <div className='details'>
                            <div className='title'>{email ? email.subject : ''}</div>
                            {/*TODO get user avatar*/}
                            <div className='header'><img className='avatar' alt='avatar' src='/img/avatars/1.jpg' />
                                <div className='from'>
                                    <span>{email.contact.firstName || email.contact.lastName ? email.contact.firstName + ' ' + email.contact.lastName : ''}</span>
                                    {email.contact.email ? email.contact.email : null}
                                </div>
                                <div
                                    className='date'>{email ? moment(email.createdAt).format('MMMM Do YYYY, h:mm:ss a') : null}</div>
                            </div>
                            <div className='content'>
                                <p>{email ? ReactHtmlParser(entities.decode(email.content)) : null}</p>
                            </div>
                            <span>Characters: <Badge color={'info'} style={{ fontSize: 12 }}>{characters}</Badge></span>{' '}
                            <span>Attachments: <Badge color={'info'} style={{ fontSize: 12 }}>{attachments}</Badge></span>{' '}
                            <span>Total Coins: <Badge id={'totalCoins'} color={'success'} style={{
                                fontSize: 14,
                                cursor: 'pointer'
                            }}>{calculateCoins(characters, attachments, true)}</Badge></span>{' '}
                            <Tooltip placement="top" style={{width: 250}} isOpen={this.state.toolTipCoin}
                                     target="totalCoins" toggle={this.toggleToolTipCoin.bind(this)}>
                                <p>How we calculate coin???</p>
                                <p>3000 chars = 1 page</p>
                                <p>1 Attachment = 1 page</p>
                                <p>3 page = 1 coin</p>
                                <p>inside Canada = total coin x 1 coin</p>
                            </Tooltip>
                        </div>
                    </main>
                </div>
            </div>
        )```