How to make particles js to disappear after banner section end in react

I built a banner section with particles js background. and I want start new section but the particles js background is fixed position important. I want to make the particles disappear after the banner end .
I opend the developer tools and this is the code of canvas:

<canvas data-generated="false" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: -1 !important; top: 0px !important; left: 0px !important; background-color: rgb(0, 0, 0); pointer-events: none;" aria-hidden="true" width="133" height="640"></canvas>

Banner.js code:

import { ParticlesBg } from "./ParticlesBg"
import './banner.css'

export default function Banner() {
    return (
        <section className="banner">
            <ParticlesBg className="bg" />
            <main>
                <h1>Hello World</h1>
            </main>
        </section>
    )
}

ParticlesBg.js code:

import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export function ParticlesBg() {
    const particlesInit = useCallback(async engine => {
        console.log(engine);
        // you can initiate 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 => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                fullScreen: {
                    "enable": true,
                    "zIndex": -1,
                    
                },
                background: {
                    color: {
                        value: "#000000",
                    },
                },
                fpsLimit: 60,
                interactivity: {
                    events: {
                        onClick: {
                            enable: false,
                            mode: "push",
                        },
                        onHover: {
                            enable: false,
                            mode: "repulse",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4,
                        },
                    },
                    position: "absolute"
                    
                },
                particles: {
                    color: {
                        value: "#ffffff",
                    },
                    links: {
                        color: "#ffffff",
                        distance: 150,
                        enable: true,
                        opacity: 0.5,
                        width: 1,
                    },
                    collisions: {
                        enable: true,
                    },
                    move: {
                        directions: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 1,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    shape: {
                        type: "circle",
                    },
                    size: {
                        value: { min: 1, max: 5 },
                    },
                },
                detectRetina: true,
            }}
        />
    );


}

CSS code:

.banner{
    width: 100%;
    height: 100vh;
}

.banner h1 {
    font-size: 60px;
    color: white;
}

#particles-canvas {
    position: absolute !important;
}

In CSS code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

section:not(.banner) {
    background-color: white;
}

<!-- end snippet -->