[BUG] Next.js render error when first loaded

[caohonghai]

2. Describe the bug

When I was studying the example that you provided and trying to code it in Next.js, I encountered an error: when I initialize the rendering, the closed state in the variants is not displayed, instead the DOM's own state is displayed first and then it changes to closed state.

I tried to add a closed style to them, although it solved the problem, but I obviously feel that is not the correct approach.

<motion.nav
  animate={isOpen ? "open" : "closed"}
  ref={containerRef}
  custom={height}
  className="absolute top-0 left-0 bottom-0 w-[300px]"
>
  <motion.div
    className="absolute top-0 left-0 bottom-0 w-[300px] bg-blue-300"
    variants={sidebar}
    style={{ clipPath: "circle(30px at 40px 40px)" }}
  ></motion.div>
  <Navigation />
  <MenuToggle toggle={() => toggleOpen()} />
</motion.nav>

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

stackblitz

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to 'stackblitz'
2. Click on 'Refresh' button

5. Expected behavior

I expect it to display closed state of variants on the first render, rather than its own state.