How to set a particles background on nextjs?

Question

I would like to set a particles background only on one page of my web application. I used the following code:

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

The page has 100vh (styles.page), I have tried to set a className to the Particles component like this:

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

But it doesn't show the particles, the background is red and the particles are set to white. I have also tried to set the Particles component this way:

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

But this still doesn't work. I have also tried to set height and width to 100%. Please, is there a way to make this work?