my particles component:

const options = { polygon: { draw: { enable: true, stroke: { color: "#fff", width: 0.3, opacity: 0.2, }, }, move: { radius: 10, }, inline: { arrangement: "equidistant", }, scale: 0.5, type: "inline", url: "mysvg", }, fpsLimit: 60, particles: { number: { value: 100, }, color: { value: "#ff0000", }, shape: { type: ["image", "circle"], image: { src: "cural", height: 500, width: 500, }, }, opacity: { value: 0.5, random: true, }, size: { value: 5, random: true, }, move: { enable: true, speed: 2, direction: "none", outModes: { default: "out", }, }, }, interactivity: { events: { onHover: { enable: true, mode: "repulse", }, onClick: { enable: true, mode: "push", }, }, modes: { repulse: { distance: 200, duration: 0.4, }, push: { quantity: 4, }, }, }, detectRetina: true, };

const ParticleComponent = () => { const particlesInit = useCallback(async (engine) => { console.log("Initializing tsParticles"); await loadFull(engine); console.log("tsParticles loaded"); await loadPolygonMaskPlugin(engine); []);

`const particlesLoaded = useCallback(async (container) => {
console.log(“Particles loaded”, container);
[]);

return (

);
};`

`.particles-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 1100;

#tsparticles {
position: relative;
width: 100%;
height: 100%;
background-color: lightblue;
top: 0;
left: 0;
z-index: 1000;
}`

const Page2 = () => { return ( <Section id="section2"> <div className="particles-container"> <div id="tsparticles"> <ParticleComponent /> </div> </div> </Section> ); };

all my imports are OK, all installs also.
What am I doing wrong?