Page Transitions In Vike / React

Question

I was trying to add page transitions to the Vike React boilerplate using React Transition Group

function Content({ children, url }) {
  const divRef = useRef();
  return (
    <div id="page-container">
      <SwitchTransition>
        <CSSTransition key={url} nodeRef={divRef} classNames="fade" timeout={400}>
          <div
            id="page-content"
            style={{
              padding: 20,
              paddingBottom: 50,
              minHeight: "100vh",
            }}
            ref={divRef}
          >
            {children}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

I also tried using my own page transition component, which doesn't need a key like url:

function Transition({ children }) {
  const [cloned, setCloned] = useState(cloneElement(children));
  const divRef = useRef();
  const firstRun = useRef(true);
  useEffect(
    function () {
      if (firstRun.current) {
        firstRun.current = false;
        return;
      }
      divRef.current.style.opacity = 0;
      let timeout = window.setTimeout(function () {
        divRef.current.style.opacity = 1;
        setCloned(cloneElement(children));
      }, 400);
      return function () {
        window.clearTimeout(timeout);
      };
    },
    [children, setCloned]
  );
  return (
    <div style={{ transition: "opacity 400ms" }} ref={divRef}>
      {cloned}
    </div>
  );
}

They both work well in different contexts, but here they both gave me a weird error when I navigate from the dynamic route (/star-wars) in the boilerplate to a static route:

Uncaught TypeError: (intermediate value)() is undefined
    Page +Page.jsx:6
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    ...

So I have two questions:

1. What does (intermediate value)() is undefined mean and where should I start to debug this?
2. The React docs say about cloneElement:

Using cloneElement is uncommon and can lead to fragile code. See common alternatives.

But React Transition Group uses it, and I think Framer Motion's AnimatePresence uses it as well. So is there a better way to achieve some kind of page transition or view transition (where you freeze a component in place until it animates away)?