Show only Particlejs on specific div

Question

I want to do an effect with particlejs, I want to contain my particle in a div with (width: 250px, height: 250px) but I can't. I don't know why all particles are in all pages.

I tried to contain the div in div with absolute/relative positioning.

import { useCallback } from "react";
import Particles from "react-tsparticles";
import type { Container, Engine } from "tsparticles-engine";
import { loadFull } from "tsparticles";

import '../style/Particules.css'

const Particule = () => {
    const particlesInit = useCallback(async (engine: Engine) => {
        console.log(engine);

        // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (


        <div className="container">
            <div>

                <h2>first</h2>
            </div>

            <div> <h2>second</h2>
                <Particles
                    id="tsparticles"
                    init={particlesInit}
                    loaded={particlesLoaded}
                    options={{
                        background: {
                            color: {
                                value: "#0d47a1",
                            }
                        },

                        fullScreen: {
                            enable: true,
                            zIndex: -1,
                        },
                       
                        fpsLimit: 60,
                        interactivity: {
                            events: {
                                onClick: {
                                    enable: true,
                                    mode: "push",
                                },
                                onHover: {
                                    enable: true,
                                    mode: "repulse",
                                },
                                resize: true,
                            },

                            modes: {
                                push: {
                                    quantity: 1,
                                },
                                repulse: {
                                    distance: 100,
                                    duration: 0.04,
                                },
                            },
                        },
                        particles: {
                            color: {
                                value: "#fff",
                            },

                            links: {
                                color: "#ffffff",
                                distance: 15,
                                enable: true,
                                opacity: 0.1,

                            },
                            collisions: {
                                enable: false,
                            },
                            move: {
                                direction: "none",
                                enable: true,
                                outModes: {
                                    default: "bounce",
                                },
                                random: false,
                                speed: 0.5,
                                straight: false,
                            },
                            number: {
                                density: {
                                    enable: true,
                                    area: 800,
                                },
                                value: 30,
                            },
                            opacity: {
                                value: 2,
                            },

                            style: {
                                position: "absolute"
                            },
                            shape: {
                                type: "images",
                                "images":
                                    [{
                                        "src": 'https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56314216.png',

                                    }, {
                                        "src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56597539.png"
                                    },
                                    {
                                        "src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/4042942.png"
                                    },
                                    {
                                        "src": ""
                                    }

                                    ]
                            },
                            size: {
                                random: true,
                                value: 50,

                            },
                        },
                        detectRetina: true,
                    }}
                />
            </div>
            <div>
                <h2>third</h2>
            </div>
        </div>
    );
};
export default Particule;

CSS

.container{
    display: flex;
    position: absolute;
    width: 100vw;
    height : 100%;
    top: 0;
    left: 0;
  

  }

  .container > div {
    position: relative;
    width: 100%;
   
  }

I want to contain the particles only in the second div:

Particles showing up now

My 2nd div where I want to show the particles

I've tried to add the the position absolute in the </Particle>, but so far nothing have worked

<Particles
    id="tsparticles"
    init={particlesInit}
    loaded={particlesLoaded}
    options={{
        background: {
            color: {
                value: "#0d47a1",
            }
        },
        style:{
            position:"absolute"
        },

Answer 1

write in options:

{ // ... fullScreen: { enable: false, zIndex: -1, }, fpsLimit: 60, interactivity: { events: { // ... }}} 

if you want div second apply particle, change id:

id="tsparticlesDiv2" 

Answer 2

I find the solution, have to write false in fullscreen:

{   // ...
    fullScreen: {
    enable: false,
    zIndex: -1,
    },
    fpsLimit: 60,
    interactivity: {
    events: {
    // ...
}}}