Particles don’t show up on my web page using tsparticles

I’m trying to use tsparticles, and I followed the following steps:
I first installed the package using npm install react-tsparticles.
Then I created a component including two files, the particles component:

import React from 'react';
import Particles from 'react-tsparticles';
import ParticlesOptions from './ParticlesOptions';

const ParticlesBackground = () => {
    return (
        <div>
            <Particles params={ParticlesOptions}>
            </Particles>
        </div>
    )
}

export default ParticlesBackground;

And the particles options:

const ParticlesOptions = {
  fps_limit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        enable: true,
        mode: "push"
      },
      onHover: {
        enable: true,
        mode: "repulse"
      },
      resize: true
    },
    modes: {
      push: {
        particles_nb: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: "#ffffff"
    },
    links: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.4,
      width: 1
    },
    move: {
      bounce: false,
      direction: "none",
      enable: true,
      outMode: "out",
      random: false,
      speed: 2,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: "circle"
    },
    size: {
      random: true,
      value: 5
    }
  },
  detectRetina: true
}

export default ParticlesOptions

I imported the component into my App.js properly as I see no errors, but I still see no particles on my website. Again as I mentioned, no errors are displayed! Here’s my App.js:

import React, {Component} from 'react';
import ParticlesBackground from './components/particles/ParticlesBackground';
import Clarifai from 'clarifai';
import Navigation from './components/navigation/Navigation';
import Logo from './components/logo/Logo';
import ImageLinkForm from './components/imageLinkForm/ImageLinkForm';
import Rank from './components/rank//Rank';
import './App.css';

class App extends Component {
   render() {
    return (
    <div className="App">
      <ParticlesBackground />
      <Navigation />
      <Rank />
      <Logo />
      <ImageLinkForm />
    </div>
    );
  }
}

export default App;

The whole App is displayed properly, and my background isn’t white as I found people who have the same problem and turns out that because of the background color they just couldn’t see the particles.
I fixed my vulnerabilities and reinstalled my packages properly, but it’s still not working!
I also tried to use react-particles-js package instead, but it gives me ‘module not found’ errors.
Any other suggestions? Hope u could help!