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

value: function componentDidUpdate() {
      // Animate fade on mount/unmount
      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);
    }
  }, {

value: function render() {
      var Component = this.props.animate ? _reactTransitionGroup.TransitionGroup : _Box2.default;
      var collapseProps = _Props2.default.omit(this.props, Object.keys(Collapsible.propTypes));

      return _react2.default.createElement(
        Component,
        { className: CLASS_ROOT + '__wrapper' },
        this.props.active && _react2.default.createElement(Collapse, collapseProps)
      );
    }
  }]);

return _react["default"].createElement(_child["default"], {
          key: child.key,
          names: _this.normalizeNames(animation),
          onAppear: beforeAppear,
          onAppearing: onAppear,
          onAppeared: afterAppear,
          onEnter: beforeEnter,
          onEntering: onEnter,
          onEntered: afterEnter,
          onExit: beforeLeave,
          onExiting: onLeave,
          onExited: afterLeave
        }, child);
      });

      return _react["default"].createElement(_reactTransitionGroup.TransitionGroup, _extends({
        appear: animationAppear,
        component: singleMode ? FirstChild : component
      }, others), animateChildren);
    }
  }]);

* This TimeoutTransitionGroup instead uses a user-defined timeout to determine
 * when it is a good time to remove the component. Currently there is only one
 * timeout specified, but in the future it would be nice to be able to specify
 * separate timeouts for enter and leave, in case the timeouts for those
 * animations differ. Even nicer would be some sort of inspection of the CSS to
 * automatically determine the duration of the animation or transition.
 *
 * This is adapted from Facebook's CSSTransitionGroup which is in the React
 * addons and under the Apache 2.0 License.
 */

const React = require('react');
const ReactDOM = require('react-dom');
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");
const TransitionGroup = require('react-transition-group').TransitionGroup;

const TICK = 17;

/**
 * EVENT_NAME_MAP is used to determine which event fired when a
 * transition/animation ends, based on the style property used to
 * define that event.
 */
const EVENT_NAME_MAP = {
    transitionend: {
        'transition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'mozTransitionEnd',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
    },

var classes = (0, _classnames2.default)(CLASS_ROOT, className);

      var animateChildren = void 0;
      if (keep || visible) {
        animateChildren = _react2.default.Children.map(children, function (child, index) {
          return _react2.default.createElement(
            AnimateChild,
            { key: index, enter: enter, leave: leave,
              visible: visible },
            child
          );
        });
      }

      return _react2.default.createElement(
        _reactTransitionGroup.TransitionGroup,
        _extends({}, props, {
          className: classes,
          component: component,
          ref: function ref(_ref3) {
            return _this5.animateRef = _ref3;
          }
        }),
        animateChildren
      );
    }
  }]);

value: function render() {
			var images = this.props.images || [];
			var cImage = images[this.state.currentId];
			return _react2.default.createElement(
				'div',
				{ className: 'carousel' },
				_react2.default.createElement(
					'div',
					{ className: 'carousel-main', alt: '' },
					_react2.default.createElement(
						_reactTransitionGroup.TransitionGroup,
						{ className: '' },
						_react2.default.createElement(
							Fade,
							{ key: this.state.currentId },
							_react2.default.createElement('img', { src: cImage, key: cImage })
						)
					)
				),
				_react2.default.createElement('div', { className: 'prev', onClick: this.subCurrent }),
				_react2.default.createElement('div', { className: 'next', onClick: this.addCurrent }),
				_react2.default.createElement(_Footer.Footer, { images: images, currentId: this.state.currentId, setCurrent: this.setCurrent, thumb: this.props.thumb })
			);
		}
	}]);

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: 0.01; transition: opacity ' + duration + 'ms; }\n\t\t';

			(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);
		}
	}, {