diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 2be22871..115699a4 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CSSTransition from 'react-transition-group/CSSTransition';
 import { range, getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import CalendarMonth from './CalendarMonth';
@@ -135,25 +136,23 @@ 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} />
-          <CssTransitionGroup
-            transitionName={animationModule}
-            transitionEnterTimeout={350}
-            transitionLeaveTimeout={350}
-          >
-            <CalendarMonth
-              enabledDates={this.props.enabledDates}
-              disabledDates={this.props.disabledDates}
-              key={this.state.viewDate.getMonth()}
-              locale={this.props.locale}
-              maxDate={this.props.maxDate}
-              minDate={this.props.minDate}
-              onDayClick={this.handleDayClick}
-              selectedDate={this.props.selectedDate}
-              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
-              theme={this.props.theme}
-              viewDate={this.state.viewDate}
-            />
-          </CssTransitionGroup>
+          <TransitionGroup>
+            <CSSTransition classNames={animationModule} timeout={350}>
+              <CalendarMonth
+                enabledDates={this.props.enabledDates}
+                disabledDates={this.props.disabledDates}
+                key={this.state.viewDate.getMonth()}
+                locale={this.props.locale}
+                maxDate={this.props.maxDate}
+                minDate={this.props.minDate}
+                onDayClick={this.handleDayClick}
+                selectedDate={this.props.selectedDate}
+                sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+                theme={this.props.theme}
+                viewDate={this.state.viewDate}
+              />
+            </CSSTransition>
+          </TransitionGroup>
         </div>
       );
     }
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index e256fc42..9ccf93c8 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CSSTransition from 'react-transition-group/CSSTransition';
 import { getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import Hours from './ClockHours';
@@ -116,20 +117,18 @@ class Clock extends Component {
           style={{ height: this.state.radius * 2 }}
           ref={(node) => { this.placeholderNode = node; }}
         >
-          <CssTransitionGroup
-            transitionName={animationModule}
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={500}
-          >
-            <div
-              key={this.props.display}
-              className={theme.clockWrapper}
-              style={{ height: this.state.radius * 2 }}
-            >
-              {this.props.display === 'hours' ? this.renderHours() : null}
-              {this.props.display === 'minutes' ? this.renderMinutes() : null}
-            </div>
-          </CssTransitionGroup>
+          <TransitionGroup>
+            <CSSTransition classNames={animationModule} timeout={500}>
+              <div
+                key={this.props.display}
+                className={theme.clockWrapper}
+                style={{ height: this.state.radius * 2 }}
+              >
+                {this.props.display === 'hours' ? this.renderHours() : null}
+                {this.props.display === 'minutes' ? this.renderMinutes() : null}
+              </div>
+            </CSSTransition>
+          </TransitionGroup>
         </div>
       </div>
     );