react-portal loads data then doesn't re-render - reactjs

Question

I have been trying to render ParticleJS as a background to the root div of my create-react-app and I have had success of it loading initially, but when changing routes and then visiting the homepage again, the particlejs is gone. Below is my configuration, please let me know if there is something I am missing.
import React, { Component } from 'react';
import { Portal } from 'react-portal';
import Particles from 'react-particles-js';
class Particle extends Component {
render() {
return (
<Portal node={document && document.getElementById('root')}>
<div id="particles">
<Particles
params={{
particles: {
number: {
value: 20,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "",
"width": 100,
"height": 100
},
"opacity": {
"value": 0.6,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.5,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#FFFFFF",
"opacity": 0.6,
"width": 1
},
"move": {
"enable": true,
"speed": 4,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": .6
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
}} />
</div>
</Portal>
);
}
}
export default Particle;
And I have this for the following component to render this file
class HomePage extends Component {
componentWillMount() {
window.scrollTo(0,0);
}
render() {
return (
<ScrollAnimation animateIn='fadeIn'>
<Particles/>
</ScrollAnimation>
Is there something I should be doing to re-render this?

Answer 1

Ah.... It was CSS, did not realize the background of particles was being affected.