Next.js page transition with framer motion throws error while pressing backbutton

I am using framer-motion with next.js to animate page routes. Everything works fine until I press back button which throws error

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

My _app.js code

function MyApp({ Component, pageProps, router }) {
  NProgress.configure({
    minimum: 0.3,
    easing: 'ease',
    speed: 800,
    showSpinner: true,
  });
  Router.events.on('routeChangeStart', () => NProgress.start());
  Router.events.on('routeChangeComplete', () => NProgress.done());
  Router.events.on('routeChangeError', () => NProgress.done());

  return (
    <>
      <AnimatePresence exitBeforeEnter>
        <Component {...pageProps} key={router.route} />
      </AnimatePresence>

      <ToastContainer
        progressClassName="toastProgress"
        bodyClassName="toastBody"
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        draggable={false}
        pauseOnVisibilityChange
        closeOnClick
        pauseOnHover
      />
    </>
  );
}

export default wrapper.withRedux(MyApp);

My layout component code

const Layout = ({ children, title = 'Hot Taste', content }) => {
  const spring = {
    type: 'spring',
    damping: 20,
    stiffness: 100,
    when: 'afterChildren',
  };
  return (
    <>
      <Navbar />
      <motion.div
        transition={spring}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ x: -300, opacity: 0 }}
        className="main"
      >
        {children}
      </motion.div>
      <Footer />
    </>
  );
};

export default Layout;

Everything works fine until I hit back button from /product/[id] to /product page