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

global.SETTINGS = _createSettings()

// 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

className: _styles["default"].secondaryButton
      }) : _react["default"].createElement(_Button["default"], {
        onClick: function onClick() {
          _this3.exit();
        },
        className: (0, _classnames["default"])(_styles["default"].secondaryButton)
      }, _i18n["default"].getString('skip', this.props.currentLocale));

      var nextButton = _react["default"].createElement(_Button["default"], {
        onClick: function onClick() {
          _this3.slideTo(_this3.state.curIdx + 1);
        },
        className: (0, _classnames["default"])(_styles["default"].primaryButton)
      }, onLastPage ? _i18n["default"].getString('finish', this.props.currentLocale) : _i18n["default"].getString('next', this.props.currentLocale));

      var controlView = _react["default"].createElement(_reactTransitionGroup.Transition, {
        "in": this.state.curIdx > 0,
        timeout: 300
      }, function (state) {
        return _react["default"].createElement("div", {
          className: _styles["default"].control,
          style: _objectSpread({}, controlStyles[state])
        }, skipButton, _react["default"].createElement("ul", {
          className: _styles["default"].indicator
        }, indicatorView), nextButton);
      });

      var carouselClassName = this.props.carouselClassName;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_styles["default"].carousel, carouselClassName)
      }, _react["default"].createElement("div", {
        className: _styles["default"].carouselBox,

value: function render() {
      var _this$props = this.props,
          names = _this$props.names,
          onAppear = _this$props.onAppear,
          onAppeared = _this$props.onAppeared,
          onAppearing = _this$props.onAppearing,
          onEnter = _this$props.onEnter,
          onEntering = _this$props.onEntering,
          onEntered = _this$props.onEntered,
          onExit = _this$props.onExit,
          onExiting = _this$props.onExiting,
          onExited = _this$props.onExited,
          others = _objectWithoutProperties(_this$props, ["names", "onAppear", "onAppeared", "onAppearing", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);

      return _react["default"].createElement(_reactTransitionGroup.Transition, _extends({}, others, {
        onEnter: this.handleEnter,
        onEntering: this.handleEntering,
        onEntered: this.handleEntered,
        onExit: this.handleExit,
        onExiting: this.handleExiting,
        onExited: this.handleExited,
        addEndListener: this.addEndListener
      }));
    }
  }]);