convert <Transition> to useTranstion (there is some bugs here)

Root.js

import React from 'react'
import { useTransition, config, animated } from 'react-spring'
import Layout from './Layout'
import SiteHeader from './SiteHeader'
import SiteFooter from './SiteFooter'

const isBrowser = typeof window !== 'undefined'

const Root = ({ children, ...props }) => {
  const headerRef = React.useRef()
  const context = props.pageContext.frontmatter || {}
  const pageTranitions = useTransition({ children, props }, page => page.props.location.href, {
    initial: null,
    unique: true,
    immediate: !isBrowser || !window.__navigatingToLink,
    from: { opacity: 0 },
    enter: { opacity: 1 },
    config: (page, state) =>
      ({
        initial: config.default,
        // from: config.default,
        enter: { ...config.gentle, delay: 50, },
        leave: { duration: 50 },
      }[state] || config.default),
    leave: page => ({
      position: 'absolute',
      top:
        isBrowser && window.__navigatingToLink
          ? -window.pageYOffset + headerRef.current.offsetHeight
          : headerRef.current.offsetHeight,
      width: '100%',
      opacity: 0,
    }),
  })

  return (
    <Layout>
      <SiteHeader
        ref={headerRef}
        expanded={props.location.pathname === '/'}
        color={context.headerColor}
        overlay={Boolean(context.cover)}
      />
      {pageTranitions.map(({ item: page, props: style, key }) => (
        <animated.div key={key} style={style}>
          {page.children}
        </animated.div>
      ))}
      <SiteFooter color={context.headerColor} backgroundColor={context.backgroundColor} />
    </Layout>
  )
}
export default Root