<AnimatePresence>
    <motion.div key={slide} exit={{opacity: 0}}initial={{opacity:0}} animate={{opacity: 1}} transition={{duration:2}} className="">
      <p className="text-start text-grey text-wrap py-3">
        {data[slide].comment}
      </p> 
      <p className="text-start text-grey text-wrap pb-10">
        {data[slide].name}
      </p>
    </motion.div>
  </AnimatePresence>

i am loading data dynamically , when i add the ‘exit’ feature of framer motion all the data is rendered and the all of them start to animate, overflowing the div instead of showing one at a time, otherwise if i remove it then it works fine showing only one at a time like a slideshow but without the exit animation

how do i fix this problem?