I am going to change the H2 value base on the active image of the swiper slider and swiper plugins already imported. I have two state which is the title, setTitle and description, setDescription.
but when rendered the h2 value is not populated by the Title and the description also.

**Code Started**

```
const Projects = () => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const Images = [
    {
      id: 1,
      images:
        "https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
    },
    {
      id: 2,
      images:
        "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
    },
    {
      id: 3,
      images:
        "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
    },
  ];
  const Text = [
    {
      id: 1,
      title: "Sunset",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, non commodi.",
    },
    {
      id: 2,
      title: "Sunrise",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, non commodi.",
    },
    {
      id: 3,
      title: "Moon Light",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, non commodi.",
    },
  ];
  return (
    <div className="h-[100vh] flex justify-center items-center">
      <Swiper
        onSlideChange={() =>
          setTitle(Text.title),
          setDescription(Text.description)
        }
        onSwiper={(swiper) =>
          console.log(swiper)
        }
        className="justify-center items-center max-w-[1440px]"
      >
        <SwiperSlide>
          <img src="https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
        </SwiperSlide>
      </Swiper>
      <div className="flex flex-row md:flex-col items-center justify-center">
        <h2 className="text-5xl text-white font-cerabold">
          {title}
        </h2>
        <p>{description}</p>
      </div>
    </div>
  );
};

export default Projects;

```