ReactCSSTransitionGroup enter animation not working, exit is working fine - reactjs

Question

I am creating a reusable modal, and everything is working but when I actually call the component, the enter transition is not working. Exit works perfectly. I get the error:
warning.js:45 Warning: Failed propType: transitionLeaveTimeout wasn't
supplied to ReactCSSTransitionGroup: this can cause unreliable
animations and won't be supported in a future version of React.Check
the render method of Modal
I have supplied enter and leave timeouts as instructed and still no luck.
import React from 'react';
import { render } from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import '../../modal.css';
const Modal = React.createClass({
render(){
if(this.props.isOpen){
return (
<ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={400} transitionLeaveTimeout={400}>
<div className="ui-modal" key={this.props.transitionName} {...this.props}>
{this.props.children}
</div>
</ReactCSSTransitionGroup>
);
} else {
return <ReactCSSTransitionGroup transitionName={this.props.transitionName} />;
}
}
});
const UiModal = React.createClass({
getInitialState(){
return { isModalOpen: false };
},
openModal() {
this.setState({ isModalOpen: true });
},
closeModal() {
this.setState({ isModalOpen: false });
},
setModalSize() {
this.setState({ isModalLarge: false });
},
render() {
const { openBtnText, header, subHeader, body, footer, optionalFooterText, closeBtnText, size } = this.props;
const modalSize = size === 'large' ? 'ui-modal-large' : 'ui-modal-small';
return (
<div className="ui-modal-trigger-container">
<h1>Modal small enter from bottom</h1>
<div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
<Modal isOpen={this.state.isModalOpen} transitionName="modal-anim" id={modalSize}>
<h1 className="ui-modal-header">{header}</h1>
<div className="ui-modal-subheader">{subHeader}</div>
<div className="ui-modal-body">
{body}
</div>
<div className="ui-modal-footer">
<div className="ui-modal-footer-button-group">
<div className="ui-modal-footer-button button" onClick={this.closeModal}>{closeBtnText}</div>
<div className="ui-modal-optional-footer-text" onClick={this.closeModal}>{optionalFooterText}</div>
</div>
</div>
</Modal>
</div>
);
}
});
export default UiModal;
The only information I get back in the console is:
warning.js:45 Warning: Failed propType: transitionLeaveTimeout wasn't
supplied to ReactCSSTransitionGroup: this can cause unreliable
animations and won't be supported in a future version of React.Check
the render method of Modal
I am unsure how to fix since I have provided enter and leave timeouts already and it does not fix the issue.
The CSS for the modal is below:
.ui-modal-trigger-container {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 0;
margin-top: 300px;
}
.ui-modal {
width: 450px;
margin: 0 auto;
top: 70%;
left: 35%;
padding: 20px;
background-color: green;
position: absolute;
z-index: 1;
border: 1px solid grey;
box-shadow: 0 0 5px 2px #fff;
background: white;
}
#ui-modal-small {
width: 450px;
margin: 0 auto;
top: 70%;
left: 35%;
padding: 20px;
background-color: green;
position: absolute;
z-index: 1;
border: 1px solid grey;
box-shadow: 0 0 5px 2px #fff;
background: white;
}
#ui-modal-large {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 8%;
left:0%;
border: 1px solid #ccc;
background: white;
}
.ui-modal-header {
font-family: 'Flexo';
font-size: 28px;
border-bottom: 2px solid black;
width: 90%;
margin: 0 auto;
}
.ui-modal-subheader {
font-family: 'Flexo';
font-size: 13px;
width: 90%;
margin: 0 auto;
}
.ui-modal-body {
margin: 0 auto;
width: 90%;
padding: 10px;
}
.ui-modal-footer {
border-top: 2px solid black;
margin: 0 auto;
width: 90%;
}
.ui-modal-footer-button-group {
padding-top: 10px;
}
.ui-modal-footer-button {
float: right;
}
.ui-modal-optional-footer-text {
float: left;
color: #4099D4;
font-style: italic;
}
.modal-anim-enter {
opacity: 0.00;
transform: translateY(100%);
transition: all .5s;
}
.modal-anim-enter.modal-anim-enter-active {
opacity: 1;
transform: scale(1);
transition: all .5s;
}
.modal-anim-leave {
opacity: 1;
transform: translateY(100%);
transition: all .5s;
}
.modal-anim-leave.modal-anim-leave-active {
opacity: 0.00;
transform: translateY(100%);
}