How to use the react-transition-group.CSSTransition function in react-transition-group

// polyfill for Object.entries
import entries from "object.entries"
if (!Object.entries) {
  entries.shim()
}

import fetchMock from "fetch-mock"
// Mock react-transition-group which is used by material-ui. It causes test failures due to a callback timed to
// occur after the test has already cleaned up the DOM elements.
const FakeTransition = ({ children }) => children()
const FakeCSSTransition = props =>
  props.in ? {props.children} : null
// adapted from https://testing-library.com/docs/example-react-transition-group
ReactTransitionGroup.Transition = FakeTransition
ReactTransitionGroup.CSSTransition = FakeCSSTransition

// eslint-disable-next-line mocha/no-top-level-hooks
beforeEach(() => {
  // Uncomment to diagnose stray API calls. Also see relevant block in afterEach
  /*
  fetchMock.restore();
  fetchMock.catch((...args) => {
    console.log("ERROR: Unmatched request: ", args);
    console.trace();
    process.exit(1);
  });
  */
})

// cleanup after each test run
// eslint-disable-next-line mocha/no-top-level-hooks

value: function renderFade() {
      return _react2.default.createElement(
        _reactTransitionGroup.CSSTransition,
        {
          timeout: 500,
          classNames: 'fade'
        },
        this.props.children
      );
    }
  }, {

onNextClick: this.onNextClick,
        date: date,
        onHeaderClick: this.changeMode
      }), _react["default"].createElement(_CalendarBody["default"], _extends({
        ref: function ref(calendarBody) {
          _this3.calendarBody = calendarBody;
        },
        isAnimating: animating,
        bodyWidth: containerWidth,
        animateEnd: function animateEnd() {
          return _this3.setState({
            animating: false
          });
        },
        date: date
      }, this.props)), _react["default"].createElement(_reactTransitionGroup.CSSTransition, {
        "in": mode === 'month',
        appear: true,
        classNames: "month",
        timeout: 300,
        unmountOnExit: true
      }, _react["default"].createElement(_MonthPicker["default"], {
        className: "rdp__months-absolute",
        style: {
          height: containerHeight
        },
        defaultValue: defaultValue,
        onMonthChange: this.monthChange
      })));
    }
  }]);

var duration = 200;
      var styles = '\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ' + duration + 'ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: .01; transition: opacity ' + duration + 'ms; }\n\t\t';

      (0, _reactDom.render)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'style',
          null,
          styles
        ),
        _react2.default.createElement(
          _reactTransitionGroup.TransitionGroup,
          this.props,
          _react2.default.createElement(
            _reactTransitionGroup.CSSTransition,
            { timeout: { enter: duration, exit: duration }, className: 'fade' },
            this.props.children
          )
        )
      ), this.portalElement);
    }
  }, {

var Fade = function Fade(_ref) {
	var children = _ref.children,
	    props = _objectWithoutProperties(_ref, ['children']);

	return _react2.default.createElement(
		_reactTransitionGroup.CSSTransition,
		_extends({}, props, {
			timeout: { enter: 500, exit: 0 },
			classNames: 'carouselContent'
		}),
		children
	);
};

(0, _reactDom.render)(_react2.default.createElement(
				_PassContext2.default,
				{ context: this.context },
				_react2.default.createElement(
					'div',
					null,
					_react2.default.createElement(
						'style',
						null,
						styles
					),
					_react2.default.createElement(
						_reactTransitionGroup.TransitionGroup,
						this.props,
						_react2.default.createElement(
							_reactTransitionGroup.CSSTransition,
							{ timeout: { enter: duration, exit: duration }, classNames: 'fade' },
							this.props.children
						)
					)
				)
			), this.portalElement);
		}
	}, {

value: function render() {
      if (!this.props.guides || this.props.guides.length === 0 || !this.state.entered) return null;

      if (this.props.showSpinner) {
        return _react["default"].createElement(_SpinnerOverlay["default"], null);
      }

      var view = this.getCarouselView();
      return _react["default"].createElement(_reactTransitionGroup.CSSTransition, {
        "in": this.state.playing,
        timeout: 400,
        classNames: {
          appear: _styles["default"].enter,
          appearActive: _styles["default"].enterActive,
          exit: _styles["default"].exit,
          exitActive: _styles["default"].exitActive
        },
        onExited: this.onExited,
        appear: true
      }, _react["default"].createElement("div", {
        className: _styles["default"].root
      }, view));
    }
  }]);