Transition isn't working in a nested div

[sboy99]

Hello,
While I'm using Transition inside a container Transition isn't working. Actually I'm adding transition to a slider element inside a slider container but transition isn't working. I have also applied <Transition.Root> in the slider component but it doesn't work.

Parent Container.

<div className="relative mt-4 flex h-full w-full items-center sm:mt-0 lg:justify-center">
          <Button
            onClick={prev}
            className="-top-4 left-0 lg:top-0 lg:left-auto lg:right-12 "
          >
            <ChevronLeftIcon className="h-5 w-5 text-slate-900 group-hover:text-lime-500" />
          </Button>
          {HomeTestimonials.map((testimonial, index) => (
            <Testimonial
              key={index}
              {...testimonial}
              show={index === activeIndex}
            />
          ))}
          <Button
            onClick={next}
            className="-top-4 left-8 lg:top-0 lg:left-auto lg:right-0 "
          >
            <ChevronRightIcon className="h-5 w-5 text-slate-900 group-hover:text-lime-500" />
          </Button>
        </div>

Child Component

 function Testimonial({
    userName,
    domain,
    rating,
    profile,
    title,
    desc,
    show = false,
  }) {
    return (
      <Transition
        appear={true}
        show={show}
        enter="transition-opacity duration-500"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-500"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
        beforeLeave={() => console.log(`Hii`)}
      >
        <div className="max-w-sm divide-y divide-slate-200/50">
          <h1 className="py-3 font-inter">
            <p className="text-lg font-semibold text-lime-400">{title}</p>
            <p className=" leading-6 text-slate-300 line-clamp-4">{desc} </p>
          </h1>
          <div className="flex items-center justify-between py-3">
            <div className="flex items-center gap-2 text-lg text-lime-400">
              <StarIcon className="h-6 w-6 " /> {rating}
            </div>
            {/* profile */}
            <div className="flex items-center gap-2">
              <h1 className="-space-y-2 text-right">
                <p className="font-inter font-semibold text-white">
                  {userName}
                </p>
                <p className="text-sm tracking-tight text-slate-200">
                  {domain}
                </p>
              </h1>
              <div className="rounded-full bg-lime-500 p-1">
                <img
                  src={profile}
                  alt={userName}
                  className="h-8 w-8 rounded-full object-cover object-center"
                />
              </div>
            </div>
          </div>
        </div>
      </Transition>
    );
  }