TransitionMotion react-router leave not animating

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 (
(
{
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 => (

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:

```



```

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!