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

results.map(data => {
      const height = maxHeight[data.topic] || 0
      return {
        ...data,
        height,
        y: (totalHeight += height) - height,
      }
    }),
    item => item.topic,
    {
      unique: true,
      from: () => ({ height: 0, y: totalHeight }),
      leave: () => ({ height: 0, y: totalHeight }),
      enter: ({ y, height }) => ({ y, height }),
      update: ({ y, height }) => ({ y, height }),
      config: config.gentle,
      onDestroyed: item => {
        // Clear out removed Result's heights from state
        const updateHeights = { ...maxHeight }
        delete updateHeights[item.topic]
        setMaxHeights(updateHeights)
      },
    }
  )
  return (
    
      
        {transitions.map(({ item, key, props: { y, ...rest } }, index) => {
          return (

render() {
    let { isOpen, onHide, headerCaption, focusRef = null, style = { maxWidth: "600px" }, children } = this.props;
    return (
      
        {isOpen
          ? (styles: any) => (
              
                
                  {headerCaption ?  : null}

export default ({ img }) => {
  const [toggleSpider, setToggleSpider] = useState(false);
  const propsLine = useSpring({
    from: { height: toggleSpider ? 50 : 0 },
    to: [{ height: toggleSpider ? 15 : 50 }],
    config: { ...config.gentle, duration: 2000 },
    delay: 1000,
    onRest: () => {
      setToggleSpider(state => !state);
    }
  });

  return (
    
      
      <img alt="spider" src="{img}">
    
  );
};