How to use the react-spring.config.stiff function in react-spring

import { config, animated, useSpring } from 'react-spring';
import { useDrag } from 'react-use-gesture';
import clsx from 'clsx';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
import _ from 'lodash';

interface Props {
  header?: React.ReactNode | ((args: { onClose(): void }) => React.ReactNode);
  footer?: React.ReactNode | ((args: { onClose(): void }) => React.ReactNode);
  children?: React.ReactNode | ((args: { onClose(): void }) => React.ReactNode);
  sheetClassName?: string;
  onClose(): void;
}

const spring = {
  ...config.stiff,
  clamp: true
};

// The sheet is dismissed if it's flicked at a velocity above dismissVelocity or dragged down more than dismissAmount times the height of the sheet.
const dismissVelocity = 0.8;
const dismissAmount = 0.5;

// Disable body scroll on mobile
const mobile = /iPad|iPhone|iPod|Android/.test(navigator.userAgent);

const stopPropagation = (e) => e.stopPropagation();

/**
 * A Sheet is a UI element that comes up from the bottom of the scren, and can be dragged to dismiss.
 */
export default function Sheet({

const { visible } = this.state;
    const {
      action = null, actionLabel = null, message = null, messageParams = {},
    } = this.snack;

    // Action exits without actionLabel. Handle the whole box
    const boxProps = {
      ...(action && !actionLabel) && { onClick: this.handleAction },
    };

    return (
      <div>
        
          {props =&gt; (
            <div data-footer-inset-update-ignore="true" style="{props}">
              <div>
                
                  
                
                {(action &amp;&amp; actionLabel) &amp;&amp; (
                  </div></div></div>

const containerRef = useRef()
  // https://react-spring.surge.sh/#/useTransition
  const containerTransition = useTransition(visible, item => item, {
    ref: containerRef,
    config: config.stiff,
    from: { opacity: 0, x: -500 },
    enter: { opacity: 1, x: 0 },
    leave: { opacity: 0, x: 500 },
    unique: true,
    reset: true
  })

  const cardsRef = useRef()
  const cardsTransition = useTransition(visible ? items : [], item => item, {
    ref: cardsRef,
    config: config.stiff,
    from: { opacity: 0, translateY: -30 },
    enter: { opacity: 1, translateY: 0 },
    leave: { opacity: 0, translateY: -30 },
    trail: 400 / items.length,
    unique: true,
    reset: true
  })

  // https://react-spring.surge.sh/#/useChain
  useChain(visible ? [containerRef, cardsRef] : [cardsRef, containerRef], [
    0,
    visible ? 0.1 : 0.6
  ])

  return (
    <div></div>

{options.map((option, i) =>
          
            {({ value }) => (
              
            )}
          
        )}

const renderWords = (words, action) => (
      
        {this.state.randomWords.map(word => ({ opacity, y }) => {
          const hasError = this.state.error
          const isSelected = this.state.words[word]
          const selectedColor = hasError ? '#f67b7b' : 'whitesmoke'
          const bgColor = isSelected ? selectedColor : 'transparent'

          return (
             `translate3d(0,${prop}px,0)`),
                cursor: 'pointer'
              }}

const [props, set] = useSpring(() => ({
    opacity: 0,
    transform: initialTransform,
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    immediate: true,
    config: config.stiff
  }));

const TreeNode = ({ classes, children, text, expanded }) => (
  <div>
    <div>{`${expanded ? '-' : '+'} ${text}`}</div>
    
      {animatedStyle =&gt; (
        
          {children}
        
      )}
    
  </div>
)