Particles doesn't show up in react-js

This is my code in Particle.js

import React from "react";
import Particles from "react-tsparticles";

function Particle() {
  return (
    <Particles
      id="tsparticles"
      params={{
        particles: {
          number: {
            value: 160,
            density: {
              enable: true,
              value_area: 1500,
            },
          },
          line_linked: {
            enable: false,
            opacity: 0.03,
          },
          move: {
            direction: "right",
            speed: 0.05,
          },
          size: {
            value: 1,
          },
          opacity: {
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.05,
            },
          },
        },
        interactivity: {
          events: {
            onclick: {
              enable: true,
              mode: "push",
            },
          },
          modes: {
            push: {
              particles_nb: 1,
            },
          },
        },
        retina_detect: true,
      }}
    />
  );
}

export default Particle;

and I call particle in Home.js

import Particle from "../Particle&qu开发者_运维技巧ot;;
import Button from 'react-bootstrap/Button';

function Home() {

  return (
    <div className="mt-5">
        <Particle/>
        <Button href="" target="_blank" className="register-btn-inner" size="lg">
          Register
        </Button>   
      </div>
    );
  }
  
  export default Home;

I checked a lot of same questions like particles.js not showing up in reactjs project and Particle.js not showing particles on ReactJS website but solutions don't help me at all. I searched a lot but I don't understand my mistake. why Particle doesn't work? I installed tsparticles and react-tsparticles libraries too.