how can i make a nested animation in framer motion?

i started using framer-motion 3 days ago, i tried making a dropdown menu which has a dropiing animation, the menu contains a list that has a slide animation, it slides when changing the menu as a result of clicking in < settings or on back > however the sliding animation also triggers the droping animation with it therefore when i cick on settings for example i get both the droping animation and the sliding animation simulatously. i want the two animations to be separated from each other

here is the CodeSandbox https://codesandbox.io/p/devbox/k9p4fs

const Header = ({barStuff,openStuff,menuStuff})=>{
  const [bars,setBars] = barStuff;
  const [open,setOpen] = openStuff;
  const [menu,setMenu] = menuStuff;
  const NavItem = ({children,leftIcon,rightIcon,onClick})=>{
    return(
      <li className="nav-item" onClick={onClick}>
        <span className="icon-left icon-center">{leftIcon}</span>
        {children}
        <span className="icon-right icon-center">{rightIcon}</span>
      </li>
    )
  }
  const Nav = ()=>{
    const navItems = [
      {iconLeft:undefined,iconRight:<FaHome/>,path:'/',content:'Home'},
      {iconLeft:undefined,iconRight:<FaComments/>,path:'/Q&A',content:'Q&A'},
      {iconLeft:undefined,iconRight:<FaInfoCircle/>,path:'/About',content:'About'},
      {iconLeft:<FaCaretLeft/>,iconRight:<FaCog/>,path:'/Settings',content:'Settings'}
    ]
    const settingsItems = [
      { iconRight: <FaSun />, content: "Brightness", path: "/Settings/Brightness" },
      { iconRight: <FaPen />, content: "Appearance", path: "/Settings/Appearance" },
      { iconRight: <FaWrench />, content: "Help & Support", path: "/Settings/Help" },
      { iconRight: <FaCaretRight />, content: "Back", path: "/Settings" }
    ]
    return(
      <AnimatePresence mode="wait"> 
      {(!bars || open) &&
        <motion.nav 
          className="nav-bar" 
          style={{'--nav-length':menu==='main'? navItems.length:settingsItems.length}}
          initial={open? {height:32,opacity:0,y:-5}:undefined}
          animate={open? {height:`calc(var(--nav-length)*var(--nav-item-height))`,opacity:1,y:0}:undefined}
          exit={open?{height:32,opacity:0,y:5}:undefined}
          transition={{duration:0.3,ease:'easeInOut'}}
        >
          <AnimatePresence> 
          {menu==='main'&&
            (<motion.ul 
              key='main'
              className="nav-list"
              initial={{x:'-100%'}}
              animate={{x:'0%'}}
              exit={{x:'-100%'}}
              transition={{duration:0.3,ease:'easeInOut'}}
            >
              {navItems.map((item,ind)=>(
                <NavItem
                  leftIcon={bars? item.iconLeft:undefined}
                  rightIcon={bars? item.iconRight:undefined}
                  key={ind}
                  onClick={item.content.toString()==='Settings'? ()=>setMenu('Settings'):()=> setOpen(!open)}
                ><Link to={item.path}>{item.content}</Link></NavItem>
              ))}
            </motion.ul>)
          }    
          </AnimatePresence> 

          <AnimatePresence>
          {menu==='Settings' &&
            (<motion.ul 
              key='settings'
              className="nav-list"
              initial={{x:'100%'}}
              animate={{x:'0%'}}
              exit={{x:'100%'}}
              transition={{duration:0.3,ease:'easeInOut'}}
            >
              { settingsItems.map((item,ind)=>(
                <NavItem
                  leftIcon={bars? item.iconLeft:undefined}
                  rightIcon={bars? item.iconRight:undefined}
                  key={ind}
                  onClick={item.content.toString()==='Back'? ()=>setMenu('main'):undefined}
                ><Link to={item.path}>{item.content}</Link></NavItem>  
              ))}
            </motion.ul>)
          }
          </AnimatePresence>
        </motion.nav>
      }
      </AnimatePresence>
    )
  }
  return (
    <header>
      <Link className="logo">YuuAnimate</Link>
      {bars? (
          <div className="drop-menu-container">
            <button 
              className="burger-menu"
              onClick={()=> setOpen(!open)}
            ><FaBars/></button>
            <Nav/>
          </div>
        ):(
          <Nav/>
        )
      }
    </header>
  )
}

i tried making a dropdown menu which has a dropiing animation, the menu contains a list that has a slide animation, it slides when changing the menu as a result of clicking in < settings or on back > however the sliding animation also triggers the droping animation with it here is the CodeSandbox https://codesandbox.io/p/devbox/k9p4fs