我有一个关闭菜单，当它被切换时，菜单淡入淡出。我试图删除的是关闭动画在初始页面加载时被激活。我不希望关闭动画在页面初始加载时播放。

const [menuOpen, setMenu] = useState(false);

const location = useLocation();

useEffect(() => {
  setMenu(false);
}, [location]);

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-25%" },
};

return (
  <div>
    <button
      onClick={() => {
        setMenu((menuOpen) => !menuOpen);
      }}
    >
    </button>
    <div>
      <motion.nav animate={menuOpen ? "open" : "closed"} variants={variants}>
        <DropDownMenu />
      </motion.nav>
    </div>
  </div>
);

字符串
是否有任何解决方案，使动画只激活时，按钮被切换？