How to use the react-motion.spring function in react-motion

const pointsList = points.map((p, i) => {
    if (withMotion) {
      return (
        
          {value => (
            <div style="{{">
          )}
        
      )
    }

    const pointTransform = `translate(${p.x}px, ${p.y}px)`
    return (</div>

.forEach(key => {
        let keyStyle = {
          key: key,
          style: {
            height: spring( 0, springConfig ),
            opacity: spring( 0, springConfig ),
            z: spring( -100, springConfig )
          },
          data: sites[key]
        };

        if (sitesListVisible && selectedKey !== key && sites[key].visible) {
          keyStyle.style.height = spring( 67, springConfig );
          keyStyle.style.opacity = spring( 1, springConfig );
          keyStyle.style.z = spring( 0, springConfig );
        }

        styles.push( keyStyle );
      });

styles={slideList.map(slide => ({
            key: `${slide.id}key`,
            style: {
              left: spring(0, springSetting2),
              height: spring(slideHeight, springSetting2),
              padding: spring(20, springSetting2)
            },
            data: slide
          }))}
        >

styles={labels.map(label => ({
                key: label.id,
                data: label,
                style: {
                    x: spring(label.x, springConfig),
                    y: spring(label.y, springConfig),
                },
            }))}
        >

const getSprings = (x, y) => ({
  x: spring(x, springConfig),
  y: spring(y, springConfig)
});

const configFormWidth = 270

    return (
      <div>
        
          {({ theta }) =&gt; (
            <div style="{{">
               this.toggle()} name="cog" /&gt;
            </div>
          )}
        
         ({ x: configFormWidth, opacity: 0 })}
          willLeave={() =&gt; ({ x: spring(configFormWidth), opacity: spring(0) })}
          style={{ x: spring(0), opacity: spring(1) }}
        &gt;
          {({ x, opacity }) =&gt; (
            <div opacity="" style="{{">
              
            </div>
          )}
        
      </div>
    )
  }
}

prevInterpolatedStyles.map((_, i) => {
          return i === 0
            ? { opacity: spring(1), translateY: spring(0) }
            : {
              opacity: prevInterpolatedStyles[i - 1].opacity,
              translateY: spring(prevInterpolatedStyles[i - 1].translateY)
            }
        })
      }

renderBody() {
    const springConfig = presets.noWobble;
    const defaultStyle = {
      height: this.state.hasContent ? 100 : 0,
    };
    const style = {
      height: this.state.collapsed ? spring(0, springConfig) : spring(this.state.height, springConfig),
    };

    return (
      
        { ({ height }) =>
          <div style="{">
            { this.renderContent() }
          </div>
        }
      
    );
  }

render() {
        const { loading, hasItem, children } = this.props

        const finalHeight = !hasItem ? 100 : this.state.height
        const style = {
            height:  spring(finalHeight),
            opacity: spring(loading ? 0 : 1),
        }

        return (
            <div>
                
                
                    {({ height, opacity }) =&gt; (
                        <div style="{{">
                            </div></div>