React Transition Group page transition

Question

I'm trying to replicate a similar page transition effect as here: https://zajno.com/. So far, so good. I've manage to get quite far with the effect itself, however, the way I set up everything now, React Transition Group creates a clone of the new page and overlays that with the the new page. Of course, I don’t want this duplicate. I want to have the old page and on top mounts the new page, then the old page unmounts. Here’s my codesandbox: Link

<SwitchTransition mode="in-out">
  <Transition key={pathname} timeout={1200} unmountOnExit>
    {(state) => (
      <div className="absolute top-0 left-0 h-full w-full overflow-hidden">
        <div
          ref={ref}
          className={`absolute top-0 left-0 w-full h-full min-h-screen origin-top ${state}`}
        >
          <div
            ref={background}
            className="bg-slate-800/[.8] fixed top-0 left-0 w-full h-full"
          />
          <div className="absolute top-0 left-0 w-full">{children}</div>
        </div>
      </div>
    )}
  </Transition>
</SwitchTransition>