I am using the tsparticle.js with React and Tailwind css for design in my code in the carousel slides but i cant see that on each slide. It appears only on first slide. The rest of the slides are blank. Where i used map function to assign the data to each slide.

import React, { useState, useEffect, useRef } from 'react';
import MyComponent from './TypedText';
import ParticlesComponent from './ParticlesComponents'; // Corrected import path

import image1 from '../assets/images/sliderimg1.jpg';
import image2 from '../assets/images/sliderimg2.jpg';
import 'tailwindcss/tailwind.css';
import '../index.css';

const carouselMatter = [
  {
    image: image1,
    h2: ["Title for Item1"],
    matter: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nam illum repellat aliquam. Inventore facere quod aspernatur, incidunt dolore architecto asperiores a, nobis repudiandae, nulla minima magni quis. Esse, beatae.",
  },
  {
    image: image2,
    h2: ["Title for Item2"],
    matter: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nam illum repellat aliquam. Inventore facere quod aspernatur, incidunt dolore architecto asperiores a, nobis repudiandae, nulla minima magni quis. Esse, beatae.",
  },
];

const MainCarousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef(null);
  const touchStartX = useRef(0);
  const touchEndX = useRef(0);

  useEffect(() => {
    const autoplay = setInterval(() => {
      goToNextSlide();
    }, 4000);

    return () => clearInterval(autoplay);
  }, [currentIndex]);

  const goToNextSlide = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % carouselMatter.length);
  };

  const goToPrevSlide = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + carouselMatter.length) % carouselMatter.length);
  };

  const handleTouchStart = (e) => {
    touchStartX.current = e.targetTouches[0].clientX;
  };

  const handleTouchMove = (e) => {
    touchEndX.current = e.targetTouches[0].clientX;
  };

  const handleTouchEnd = () => {
    if (touchStartX.current - touchEndX.current > 50) {
      goToNextSlide();
    }

    if (touchStartX.current - touchEndX.current < -50) {
      goToPrevSlide();
    }
  };

  const handleMouseDown = (e) => {
    touchStartX.current = e.clientX;
  };

  const handleMouseUp = (e) => {
    touchEndX.current = e.clientX;
    if (touchStartX.current - touchEndX.current > 50) {
      goToNextSlide();
    }

    if (touchStartX.current - touchEndX.current < -50) {
      goToPrevSlide();
    }
  };

  return (
    <div className="relative w-full max-h-5xl mx-auto overflow-hidden">
      <div
        ref={carouselRef}
        className="overflow-hidden"
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
      >
        <div
          className="relative flex transition-transform duration-500"
          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
        >
          {carouselMatter.map((item, index) => (
            <div key={index} className="relative min-w-full">
              <img
                src={item.image}
                alt={`Slide ${index}`}
                className="w-full h-128 object-cover"
                onDragStart={(e) => e.preventDefault()}
              />
              <div className="absolute inset-0">
                <ParticlesComponent id={`particleJs-${index}`} />
              </div>
              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-start md:px-24 text-white">
                <div className="carousel-item-matter max-w-128 z-10">
                  <h2 className="text-3xl font-bold sliding-text">
                    <MyComponent h2title={item.h2} />
                  </h2>
                  <p>{item.matter}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <button
        onClick={goToPrevSlide}
        className="absolute h-full top-1/2 left-0 transform -translate-y-1/2 bg-gray-300 opacity-30 text-black font-bold p-2 rounded-sm"
      >
        ‹
      </button>
      <button
        onClick={goToNextSlide}
        className="absolute h-full top-1/2 right-0 transform -translate-y-1/2 bg-gray-300 opacity-30 text-black font-bold p-2 rounded-sm"
      >
        ›
      </button>
    </div>
  );
};

export default MainCarousel;

I want that tsparticles.js to be appear on each slide of the carousel which i made it in reactjs.