particlejs React typscript height width container - reactjs

Question

i want to do effect with particlejs i want to contain my particle in div with (width 250px height 250px) but i cant i dont know why the all particle are in all page
i tried to this contain the div in div and with position absolute/relative
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 have this result in the image your see me i want this
but me i want to contain my particle in the second div only [enter image description here](https://i.stack.imgur.com/Yxteq.png)
i try to add the style in the the position absolute , but nothing
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
}
},
style:{
position:"absolute"
},
thanks for the help
i want to add the particle in the second div with heigth and width i dont want on the all page