How to use the react-spring/hooks.interpolate function in react-spring

perlin2(value * 0.0214, offset + 1.5) * strength,
      -1,
      1,
      12,
      20
    ),
  });

  const renderPath = (sx, c1x, c1y, c2x, c2y, ex) => `
    M ${sx},0
    C ${c1x},${c1y} ${c2x},${c2y} ${ex},18
  `;

  return (
    
  );
};

{springs.map(({ zIndex, shadow, y, scale }, i) => (
           `rgba(0, 0, 0, 0.2) 0px ${s}px ${2 * s}px 0px`
              ),
              transform: interpolate(
                [y, scale],
                (y, s) => `translate3d(0,${y}px,0) scale(${s})`
              ),
            }}
            children={items[i]}
            {...bind(i)}
          />
        ))}

(o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 15},${xy[1] / 15 + -10 + o / 8})`
  )
  const interpSpot = interpolate(
    [st, xy],
    (o, xy) => `translate(${8 + -xy[0] / 70},${-xy[1] / 70 + -10 + o / 8})`
  )
  const interpMouth = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 15 + 208},${xy[1] / 10 + 250 + o / 1.7}) scale(0.5)`
  )
  const interpHair = st.interpolate(o => `translate(79,${o / 4})`)
  const onScroll = useCallback(e => set({ st: e.target.scrollTop / 30 }), [])
  return (
    <div> {
        const rect = ref.current.getBoundingClientRect()
        set({
          xy: [
            e.clientX - rect.left - rect.width / 2,</div>

)
  const interpFace = st.interpolate(o => `translate(90,${105 + o / 4})`)
  const interpEye = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 15},${xy[1] / 15 + -10 + o / 8})`
  )
  const interpSpot = interpolate(
    [st, xy],
    (o, xy) => `translate(${8 + -xy[0] / 70},${-xy[1] / 70 + -10 + o / 8})`
  )
  const interpMouth = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 15 + 208},${xy[1] / 10 + 250 + o / 1.7}) scale(0.5)`
  )
  const interpHair = st.interpolate(o => `translate(79,${o / 4})`)
  const onScroll = useCallback(e => set({ st: e.target.scrollTop / 30 }), [])
  return (
    <div> {</div>

export default function App() {
  const ref = useRef(null)
  const [{ st, xy }, set] = useSpring(() => ({ st: 0, xy: [0, 0] }))
  const interpBg = xy.interpolate(
    (x, y) =>
      `perspective(400px) rotateY(${x / 40}deg) rotateX(${-y /
        40}deg) translate3d(-50%, -50%, 0)`
  )
  const interpFace = st.interpolate(o => `translate(90,${105 + o / 4})`)
  const interpEye = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 15},${xy[1] / 15 + -10 + o / 8})`
  )
  const interpSpot = interpolate(
    [st, xy],
    (o, xy) => `translate(${8 + -xy[0] / 70},${-xy[1] / 70 + -10 + o / 8})`
  )
  const interpMouth = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 15 + 208},${xy[1] / 10 + 250 + o / 1.7}) scale(0.5)`
  )

export default function App() {
  const ref = useRef(null)
  const [{ st, xy }, set] = useSpring(() => ({ st: 0, xy: [0, 0] }))
  const interpBg = xy.interpolate(
    (x, y) =>
      `perspective(400px) rotateY(${x / 40}deg) rotateX(${-y /
        40}deg) translate3d(-50%, -50%, 0)`
  )
  const interpFace = st.interpolate(o => `translate(90,${105 + o / 4})`)
  const interpEye = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 15},${xy[1] / 15 + -10 + o / 8})`
  )
  const interpSpot = interpolate(
    [st, xy],
    (o, xy) => `translate(${8 + -xy[0] / 70},${-xy[1] / 70 + -10 + o / 8})`
  )

<div>
      
        
         `translate3d(${x}px,0,0) scale(${s})`
            ),
          }}&gt;
          Slide
        
      
    </div>
  )
}

const interpBg = xy.interpolate(
    (x, y) =>
      `perspective(400px) rotateY(${x / 40}deg) rotateX(${-y /
        40}deg) translate3d(-50%, -50%, 0)`
  )
  const interpFace = st.interpolate(o => `translate(90,${105 + o / 4})`)
  const interpEye = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 15},${xy[1] / 15 + -10 + o / 8})`
  )
  const interpSpot = interpolate(
    [st, xy],
    (o, xy) => `translate(${8 + -xy[0] / 70},${-xy[1] / 70 + -10 + o / 8})`
  )
  const interpMouth = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 15 + 208},${xy[1] / 10 + 250 + o / 1.7}) scale(0.5)`
  )
  const interpHair = st.interpolate(o => `translate(79,${o / 4})`)
  const onScroll = useCallback(e => set({ st: e.target.scrollTop / 30 }), [])
  return (