How to use the react-motion.presets.gentle function in react-motion

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import './DatePicker.less';
import DayPicker from '../DayPicker';
import { spring, presets, Motion } from 'react-motion';
import isEqual from 'lodash/isEqual';
import { splitProps, zeroTime } from '../utils';

let springPreset = presets.gentle;
let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign

let propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  locale: PropTypes.string,
  modifiers: PropTypes.object,
  onChange: PropTypes.func,
  showToLeft: PropTypes.bool,
  showToTop: PropTypes.bool,
  tabIndex: PropTypes.number,
  value: PropTypes.object
};

let defaultProps = {
  className: '',

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import './DateRangeInput.less';
import DayPicker from '../DayPicker';
import InputAddonButton from '../InputAddonButton';
import DateVariants from '../DateVariants';
import DateInputField from '../DateInputField';
import isEqual from 'lodash/isEqual';
import dayjs from '../../dayjs';
import { spring, presets, Motion } from 'react-motion';
import getMessage from '../translations';
import { splitProps, zeroTime } from '../utils';

let springPreset = presets.gentle;
let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign

let initialState = {
  enteredTo: null,
  showPicker: false,
  showVariants: false,
  error: false,
  focused: false
};

function isSelectingFirstDay(from, to, day) {
  let firstDayIsNotSelected = !from;
  let selectedDayIsBeforeFirstDay = day < from;
  let rangeIsSelected = from && to;
  return firstDayIsNotSelected || selectedDayIsBeforeFirstDay || rangeIsSelected;
}

let isActive = (row === lastPress && colIndex === currentColumn && isPressed)

      if (isActive) {
        [x, y] = mouse
        style = {
          shadow: spring(20),
          translateX: x,
          translateY: y,
          scale: spring(1.15, presets.wobbly),
        }
      } else {
        [x, y] = this.layout[colIndex][position]

        style = {
          shadow: spring(2),
          translateX: spring(x, presets.gentle),
          translateY: spring(y, presets.gentle),
          scale: spring(1, presets.gentle)
        }
      }

      return (
        
          {({translateX, translateY, scale, shadow}) => (

render() {
      const style = {
        left: this.state.mounted ? spring(0, presets.gentle) : spring(-200)
      };

      return (
        
          {styles => {
            return (
              <div style="{{...styles,">
                
              </div>
            );
          }}
        
      );
    }

const endValue = prevStyles.map((_, i) => {
      if (i === this.state.focusedIdx) {
        var offSetX = -50;
        var scale = 1.3;
      } else {
        /*`(100 * 1.3) / 2` is the half width of the square*/
        var offSetX = (i - this.state.focusedIdx) * 150 - 100 * 1.3 / 2;
        var scale = 1;
      }
      return {
        x: spring(offSetX, presets.gentle),
        scale: spring(scale, presets.gentle)
      };
    });
    return endValue;

return outputs.map((output, index) => {
      return {
        data: ,
        key: "output_" + index,
        style: {
          opacity: spring(1, presets.gentle),
        }
      };
    });
  }

willLeave () {
    return {
      opacity: spring(0, presets.gentle),
      height: spring(0, presets.gentle)
    };
  }

render() {
      const style = {
        opacity: spring(this.state.opacity, presets.gentle)
      };

      return (
        
          {styles => {
            const opacity = styles.opacity;
            const frame = styles.frame;
            return (
              <div style="{styles}"> this.setState({mounted: true})}
              &gt;

                </div>

getStyle () {
    const { fields: { commentContent } } = this.props
    const { height } = this.state
    if (!commentContent.value || !height) {
      return { height: spring(5, presets.gentle) }
    }
    return { height: spring(height + 20, presets.gentle) }
  }

function Fade(props: TProps) {
  return (
    
      {
        interpolatingStyle => {
          return (
            <div style="{interpolatingStyle}">
              {props.children}
            </div>
          )
        }
      }
    
  )
}