TransitionMotion react-router leave not animating

[btmdave]

I'm using TransitionMotion and react-route v4 in an attempt to animate a "drawer" style route. Basically this will slide on from the side and slide back in when leaving. I have the following component which wraps the route:

const DrawerRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      children={({ location, match }) => (
        <TransitionMotion
          willEnter={() => {
            return {
              x: spring(0, { stiffness: 700, damping: 40 }),
              opacity: spring(1)
            }
          }}
          willLeave={() => {
            return {
              x: spring(100, { stiffness: 700, damping: 40 }),
              opacity: spring(0)
            }
          }}
          defaultStyles={[
            {
              key: location.key,
              style: {
                opacity: 0,
                x: 100
              },
              data: match
            }
          ]}
          styles={[
            {
              key: location.key,
              style: {
                x: spring(0, { stiffness: 700, damping: 40 }),
                opacity: spring(1)
              },
              data: match
            }
          ]}
        >
          {interpolatedStyles => (
            <div>
              {interpolatedStyles.map(config => (
                <div
                  key={config.key}
                  style={{
                    position: 'fixed',
                    zIndex: '999',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    width: '60%',
                    background: '#fff',
                    boxShadow: '2px 2px 15px 5px rgba(0,0,0,0.06)',
                    transform:
                      'translate3d(' + `${config.style.x}` + '%, 0, 0)',
                    opacity: `${config.style.opacity}`
                  }}
                >
                  <Container>
                    <Component />
                  </Container>
                </div>
              ))}
              <Overlay />
            </div>
          )}
        </TransitionMotion>
      )}
    />
  )
}

const Container = styled.div`
  overflow: auto;
  width: 100%;
  height: calc(100vh);
`

const Overlay = styled.div`
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 998;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
`

export default DrawerRoute

This is then used within other routes such as:

          <Switch location={this.props.location}>
            <DrawerRoute
              path="/items/:id"
              exact
              component={ItemRoute}
            />
          </Switch>

This works just fine when entering the route, it slides the drawer in as expected. However, when leaving the route, it just goes away, unmounts, no animation. Any suggestions on how I can support leave as well? Where it slides back in to the right? The animation should be setup correctly, but in this instance it isn't working. Thank you!