Duplicate rendering of png image

**Describe the bug**
I have an `assets` folder that contains my images. When I tried to import in that image from said `assets` folder, it renders the image twice, resulting the pdf to look like this screenshot: http://i.imgur.com/IDN6vGr.png

**To Reproduce**
Steps to reproduce the behavior including code snippet (if applies):

I don't know if my setup applies to the issue in hand at all, but if it makes a difference, I'm using React Boilerplate v3.7.0, here is my entire package.json: https://pastebin.com/KYgcYU9u

`Invoice.js`:
```
import React, {useEffect, useState} from 'react';
import UserInvoice from '../../../components/UserInvoice/UserInvoice';
import {PDFViewer} from '@react-pdf/renderer';
import logo from '../../../assets/microphone.png'

/**
* https://github.com/diegomura/react-pdf/issues/420
*
* Some explanation ^ for this weird set up of a component...
*/
const ParentInvoicePDF = ({invoice_number}) =>{
const [open, setOpen] = useState(false);

useEffect(() => {
setOpen(false);
setOpen(true);
return () => setOpen(false);
});

let lines = {
description: "30 Minute Piano Lessons with Severus - Jun. 24 (Edmund)",
quantity: 1,
unit_price: '2500',
amount: '2500'
};

return(
<>
{
open && (



)
}

)
};

export default ParentInvoicePDF;
```

`UserInvoice.js`:

```
import React from 'react';
import {
Document,
Font,
Image,
Page,
StyleSheet,
Text,
View,
} from '@react-pdf/renderer';
import UserInvoiceTable from './UserInvoiceTable/UserInvoiceTable';
import source from '../../assets/fonts/OpenSans-Regular.ttf';

Font.register({ family: 'OpenSans', src: source})

//todo: figure out how to import custom fonts
// https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551

// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'column',
backgroundColor: 'white'
},
invoiceContainer:{
padding: 35,
paddingBottom: 55,
width: '100%',
height: '20%',
flexDirection: 'row'
},
logoContainer:{
width: '30%',
height: '95%',
paddingTop: 30,
},
invoiceNumberContainer:{
width: '70%',
height: '15%',
textAlign: 'right',
fontSize: 10,
paddingTop: 25,
},
billToRow:{
flexDirection: 'row',
width: '100%',
textAlign: 'left',
fontSize: 12,
marginTop: 30,
paddingLeft: 35,
paddingRight: 35
},
detailTable:{
width: '100%',
padding: 30,
},
});

const debug = false;

const UserInvoice = ({title, logo, date, billTo, lines}) => (







Invoice


Invoice number:
Date of issue:


{title}
{date}





Bill to: {billTo}






);

export default UserInvoice;
```

**Expected behavior**
When I import in the image, I expect the image to render only once.

**Screenshots**
http://i.imgur.com/IDN6vGr.png

**Desktop (please complete the following information):**
- OS: Ubuntu 18.04.1 LTS (Bionic Beaver)
- Browser: Google Chrome Version 72.0.3626.81 (Official Build) (64-bit)
- React-pdf version: ^1.6.3