Good afternoon folks, I met a problem when I try to use framer-motion on Next with App Route, exit animation would not be played.
(I use only react before, it's work)
I read some article that metioned I need to write template.js to sort all route, but it will affect all page if write motion in template.js. I only want to add exit animation in one page, how can I fix it?

This is a part of my code

      <AnimatePresence>
        <div className="start_scene">
          <motion.div key={pathname} variants={StartPage} initial="initial" animate="animate" exit="exit"
                      style={{width: '100%', position: "relative"}}>
            <ChangeBackground setIndex={setBackgroundIndex}/>
            <motion.div variants={StartScene} initial="initial" animate="animate" exit="exit" className="bg"
                        onClick={nextDialog}
                        style={{backgroundImage: `url(/images/Startbg${backgroundIndex}.webp)`}}/>
            <motion.div variants={StartDialog} initial="initial" animate="animate" exit="exit" onClick={nextDialog}
                        className="dialog_box">
              <Image src="/images/dialog_box.webp" alt="" className="dialog_box_pic" width="1084" height="273"
                     unoptimized/>
              <motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}
                          className='dialog'>
              </motion.div>
              <motion.button variants={DialogSkipButton} initial="initial" animate="animate" exit="exit"
                             onClick={skipDialog} className="skip_button">
                <Image src="/images/skip_icon.webp" alt="" width="346" height="320" unoptimized/>
              </motion.button>
            </motion.div>
            
          </motion.div>
        </div>
      </AnimatePresence>