not able to animate custom component

import React, { Component } from "react";
import styled from "react-emotion";
import { TransitionMotion, spring } from "react-motion";
import { TopNav } from "./TopNav";
import Calendar from "./Calender";

export default class CalendarContainer extends Component {
willLeave = () => {
return {
scale: 0
};
};
render() {
const Container = styled("div")`
padding: 1em;
margin: 2em;
`;
return (

{interpolatedStyles => (

{" "}
{interpolatedStyles.map(config => {
return (

);
})}

)}

);
}
}

if i change Calender to div it works. Can someone explain y ?