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

from: { opacity: 0, width: 50, height: 50, background: 'black' },
      opacity: 1,
      width: 80,
      height: 80,
      background: 'tomato',
    })
    await next({
      from: { left: '0%' },
      left: '70%',
      background: 'seagreen',
    })
    next({
      from: { top: '0%' },
      top: '40%',
      background: 'plum',
      config: config.wobbly,
    })
    await delay(2000) // don't wait for the animation above to finish, go to the next one in 2s
    await next({ left: '0%', background: 'hotpink' })
    await next({
      top: '0%',
      background: 'teal',
    })
    await next({
      opacity: 0,
      width: 40,
      height: 40,
      background: 'black',
    })
  }
})

from: { opacity: 0, width: 50, height: 50, background: 'black' },
      opacity: 1,
      width: 80,
      height: 80,
      background: 'tomato',
    })
    await next({
      from: { left: '0%' },
      left: '70%',
      background: 'seagreen',
    })
    next({
      from: { top: '0%' },
      top: '40%',
      background: 'plum',
      config: config.wobbly,
    })
    await delay(2000) // don't wait for the animation above to finish, go to the next one in 2s
    await next({ left: '0%', background: 'hotpink' })
    await next({
      top: '0%',
      background: 'teal',
    })
    await next({
      opacity: 0,
      width: 40,
      height: 40,
      background: 'black',
    })
  }
})

const { initial, points, reset } = this.state

    // Dont render if we don't have points
    if (Object.keys(points).length === 0) {
      return null
    }

    return (
      
        {interpolatedPoints => {
          const unflattenPoints = unflatten(interpolatedPoints)
          return children(
            pointsToPath(
              Object.keys(unflattenPoints).map(key => unflattenPoints[key]),
              size
            )
          )
        }}
      
    )
  }
}

function GameBurger() {
  const droppableArea = document.querySelector(".droppable-area");

  const burgerIndex = useSelector(
    state => state.gameStatus.burgerIndex,
    shallowEqual
  );

  const burgerTransition = useTransition(burgerIndex, item => item, {
    config: config.wobbly,
    from: { transform: "translateX(100%)" },
    enter: { transform: "translateY(0%)" },
    leave: { transform: "translateY(-100%)" }
  });

  function renderAnimatedBurgerList() {
    return burgerTransition.map(({ props, key }) => (
      
        
      
    ));
  }

  return <>{renderAnimatedBurgerList()};
}

function Window({ children, show, backdropOnClick }) {
  const AppContainer = document.querySelector(".App");

  const modalTransition = useTransition(show, null, {
    config: config.wobbly,
    from: { transform: "translate(-50%, -50%) scale(0)", opacity: 0 },
    enter: { transform: "translate(-50%, -50%) scale(1)", opacity: 1 },
    leave: { transform: "translate(-50%, -50%) scale(0)", opacity: 0 }
  });

  function handleBackdropOnClick() {
    backdropOnClick && backdropOnClick();
  }

  return ReactDOM.createPortal(
    <>
      {modalTransition.map(({ item, props, key }) => {
        return (
          item && (
            
              {children}

function GameOrder() {
  const orders = useSelector(state => state.gameStatus.orders, shallowEqual);

  const ordersTransition = useTransition(orders, item => item.name, {
    config: config.wobbly,
    trail: 100,
    from: { height: 44, opacity: 1, transform: "scale(1) translateX(-110%)" },
    enter: { transform: "scale(1) translateX(0%)" },
    leave: {
      height: 0,
      opacity: 0,
      transform: "scale(0) translateX(0%)"
    }
  });

  function renderOrders() {
    return ordersTransition.map(({ item, props, key }) => {
      return (
        
          
            <img alt="{item.name}" src="{require(`./../img/${item.name}.png`)}">

function GameLives() {
  const lives = useSelector(state => state.gameStatus.lives, shallowEqual);

  const heartTransition = useTransition(_.range(lives), item => item, {
    config: config.wobbly,
    from: { transform: "scale(0)", opacity: 1 },
    enter: { transform: "scale(1)", opacity: 1 },
    leave: { transform: "scale(0)", opacity: 0 }
  });

  function renderHearts() {
    return heartTransition.map(({ props, key }) => (
      
        <img alt="Heart" src="{require(&quot;./../img/Heart.svg&quot;)}">
      
    ));
  }

  return {renderHearts()};
}