React transitions using React Motion

transitionMotion.js

import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
import { Transition,TransitionGroup } from 'react-transition-group'
import { StaggeredMotion, spring } from 'react-motion'
import {timeout} from '../constants'

export const Component = memo(({param, status}) => {
  const options = {stiffness: 470, damping: 25}
  const defaultStyles = [{x: -50}, {x: -50}]
  return(
    <>
      <StaggeredMotion
            defaultStyles={defaultStyles}
            styles={prev => prev.map((_, i) => {
                return i === 0
                ? { x: spring(status? 0 : -50, options) }
                : { x: spring(prev[i - 1].x, options) }
            })}>
            {styles => (
              <>
                <h1 style={{ transform: `translateX(${styles[0].x}px)` }} >
                  Component
                </h1>
                <p style={{ transform: `translateX(${styles[1].x}px)` }} >
                  Param: {param}
                </p>
              </>
          )}
      </StaggeredMotion>
    </> 
  )
})

export const Routing = withRouter(({ location }) => (
  <TransitionGroup>
    <Transition
      key={location.pathname}
      timeout={timeout}
      mountOnEnter={true} 
      unmountOnExit={true} 
      appear={true}
    >
    {status => {
      let show = status === 'entered' ? true : false
      return(
          <Switch location={ location }>
            <Route path='/:param' render={ props => (
              <Component
                param={props.match.params.param}
                status={show} /> 
            )} />
          </Switch>
      )}}
      </Transition>
  </TransitionGroup>
))