I have a dropdown menu and when it is toggled, the menu fades in and out. The thing I am trying to remove is the closing animation being activated when the initial page is loaded. I dont want the closed animation to play when the page is initially loaded.

  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>
  );

Are there any solutions so that the animations only activate when the button is toggled?