Well, I am passing a titles, description and Link as props to child component the Link is working but the title or description isn’t displaying

this is the child component

"use client";

import React, { useRef, useState, useEffect } from "react";
import { gsap } from "gsap";
import { MdArrowOutward } from "react-icons/md";

gsap.registerPlugin(); // Assuming you don't use ScrollTrigger

type ContentListProps = {
  items: { title: string; description: string; link: string }[];
  viewMoreText: string;
};

export default function ContentList({
  items,
  viewMoreText = "Read More",
}: ContentListProps) {
  const itemsRef = useRef<HTMLLIElement[]>([]); // Updated useRef type

  useEffect(() => {
    // Animate list-items in with a stagger
    itemsRef.current.forEach((item, index) => {
      gsap.fromTo(
        item,
        { opacity: 0, y: 20 },
        { opacity: 1, y: 0, duration: 1.3, ease: "elastic.out(1,0.3)", stagger: 0.2 }
      );
    });
  }, [items]); // dependency on items only


  return (
    <ul className="grid border-b border-b-slate-100">
      {items.map((item, index) => (
        <li key={index} className="list-item opacity-0">
          <a href={item.link} className="flex flex-col justify-between border-t border-t-slate-100 py-10 text-slate-200 md:flex-row ">
            <div className="flex flex-col">
              <span className="text-3xl font-bold">{item.title}</span>  {/* Title */}
              <p className="text-lg text-gray-500">{item.description}</p>  {/* Description */}
            </div>
            <span className="ml-auto flex items-center gap-2 text-xl font-medium md:ml-0">
              {viewMoreText} <MdArrowOutward />  {/* Read More Text */}
            </span>
          </a>
        </li>
      ))}
    </ul>
  );
}

this is the parent component

import Bounded from "@/Components/Bounded";
import Heading from "@/Components/Heading";
import { Content, isFilled } from "@prismicio/client";
import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
import ContentList from "./ContentList";
export type ContentIndexProps = SliceComponentProps<Content.ContentIndexSlice>;
const projects = [
  { title: "Project 1", description: "This is project 1", link: "https://www.google.com/" },
  { title: "Project 2", description: "This is project 2", link: "https://www.google.com/" },
  { title: "Project 3", description: "This is project 3", link: "https://www.google.com/" },
];
const ContentIndex = ({ slice }: ContentIndexProps): JSX.Element => {
  return (
    <Bounded
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <Heading size="xl" className="mb-8">
        {slice.primary.heading}
      </Heading>
      {isFilled.richText(slice.primary.description) && (
        <div className="prose prose-xl prose-invert mb-10">
          <PrismicRichText field={slice.primary.description}/>
        </div>
      )}
      <ContentList items={projects} viewMoreText="Read More" />      
    </Bounded>
  );
};
export default ContentIndex;

Literally tried everything, the thing is the Link is working but the texts are rendering or item.title and the item.description and viewMoretext to display