diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index fef1b07c..2be22871 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import { range, getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import CalendarMonth from './CalendarMonth';
@@ -135,9 +135,10 @@ const factory = (IconButton) => {
         <div data-react-toolbox="calendar">
           <IconButton id="left" className={theme.prev} icon="chevron_left" onClick={this.changeViewMonth} />
           <IconButton id="right" className={theme.next} icon="chevron_right" onClick={this.changeViewMonth} />
-          <TransitionGroup
-            classNames={animationModule}
-            timeout={{ exit: 350, enter: 350 }}
+          <CssTransitionGroup
+            transitionName={animationModule}
+            transitionEnterTimeout={350}
+            transitionLeaveTimeout={350}
           >
             <CalendarMonth
               enabledDates={this.props.enabledDates}
@@ -152,7 +153,7 @@ const factory = (IconButton) => {
               theme={this.props.theme}
               viewDate={this.state.viewDate}
             />
-          </TransitionGroup>
+          </CssTransitionGroup>
         </div>
       );
     }
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index 41ebf4bc..e256fc42 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import { getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import Hours from './ClockHours';
@@ -116,9 +116,10 @@ class Clock extends Component {
           style={{ height: this.state.radius * 2 }}
           ref={(node) => { this.placeholderNode = node; }}
         >
-          <TransitionGroup
-            classNames={animationModule}
-            timeout={{ exit: 500, enter: 500 }}
+          <CssTransitionGroup
+            transitionName={animationModule}
+            transitionEnterTimeout={500}
+            transitionLeaveTimeout={500}
           >
             <div
               key={this.props.display}
@@ -128,7 +129,7 @@ class Clock extends Component {
               {this.props.display === 'hours' ? this.renderHours() : null}
               {this.props.display === 'minutes' ? this.renderMinutes() : null}
             </div>
-          </TransitionGroup>
+          </CssTransitionGroup>
         </div>
       </div>
     );
diff --git a/package.json b/package.json
index 62b66fe6..79811a08 100644
--- a/package.json
+++ b/package.json
@@ -147,7 +147,7 @@
     "prop-types": "^15.6.0",
     "react": "^15.5.0 || ^16.0.0",
     "react-dom": "^15.5.0 || ^16.0.0",
-    "react-transition-group": "^2.2.1"
+    "react-transition-group": "^2.2.0"
   },
   "pre-commit": "lint:staged"
 }