Page transitions in React Spring and Next JS

So I'm trying to create a simple page transition between pages in next.js using react-spring, however I can't get the unmounting component to fade out. Instead it just snaps out of the screen, while the new one fades in:

The screen then loads itself underneath, I'm really struggling to work out what's going on?

I've tried adding absolute positions to the from and/or the leave keys, but to no avail

//_app.js

import "../styles/globals.css";
import { useTransition, animated } from "react-spring";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const transition = useTransition(router, {
    key: router.pathname,
    from: { opacity: 0},
    enter: { opacity: 1 },
    leave: { opacity: 0},
    config: { duration: 1000 },
    // reset:true,
  });

  return transition((style, item) => {
    return (
      <animated.div style={style}>
        <Component {...pageProps} />
     </animated.div>
    );
  });

}

export default MyApp;

Any help would be great! Thank you