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

//                interpolate(
              //                  [bgRad, bgPos],
              //                  (bgRad, bgPos) =>
              //                    `linear-gradient(${90+bgRad}deg, rgb(0, 0, 0, 0.3) 0%,rgba(184, 184, 184, 0) ${300-bgPos}px)`
              //                )
              WebkitClipPath: interpolate(
                [x1, y1, x2, y2, x3, y3, x4, y4, x5, y5],
                (x1, y1, x2, y2, x3, y3, x4, y4, x5, y5) => {
                  if (x5 === undefined) x5 = x4;
                  if (y5 === undefined) y5 = y4;
                  return `polygon(${x1}px ${y1}px, ${x2}px ${y2}px, ${x3}px ${y3}px, ${x4}px ${y4}px, ${x5}px ${y5}px )`;
                }
              ),

              transformOrigin: i % 2 === 0 ? pageWidth + "px 0px" : "0px 0px",
              transform: interpolate(
                [x, y, r, scaleX],
                (x, y, r, scaleX) =>
                  `translateX(${x}px) translateY(${y}px) rotate(${r}rad) scaleX(${scaleX})`
              )
            }}
            className={`page page--${i} `}
            {...bind(i)}
          >
            <div></div>
          
          {false &amp;&amp; i === index.value + 2 &amp;&amp; (

if (Array.isArray(prop)) {
      let transformProps: string[] = [];
      let transformUnits: string[] = [];

      const result = prop.map(styles => {
        const [transformProp] = Object.keys(styles);
        transformProps.push(transformProp);

        const { unit = '', ...rest } = styles[transformProp];

        transformUnits.push(unit);

        return offset.interpolate(rest);
      });

      const transformStyle = interpolate(result, (...values) =>
        values
          .map((value, index) => {
            return `${transformProps[index]}(${value}${transformUnits[index]})`;
          })
          .join(' ')
      );

      style[key] = transformStyle;
    }
    // e.g opacity: { range, output => -1 -> 0.1}
    else if (typeof prop === 'object') {
      style[key] = offset
        .interpolate(prop)
        // @ts-ignore
        .interpolate(val => `${val}`);
    }

return props.map(({x, y, rot, scale}, i) => (
         `translate3d(${x}px,${y}px,0)`)}}>
            {/* This is the card itself, we're binding our gesture to it (and inject its index so we know which is which) */}
            
                
            
        
    ))
}

set
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
       {
            const animationInProgress = x !== 0 || y !== 0
            if (isSelected) return 5
            if (zIndexQueue.slice(-1)[0] === id &amp;&amp; animationInProgress) return 5
            if (zIndexQueue.indexOf(id) &gt; -1 &amp;&amp; animationInProgress) return 2
            return 1
          }),
          transform: interpolate(
            [x, y, scaleX, scaleY],
            (x, y, scaleX, scaleY) =&gt; {
              return `translate3d(${x}px, ${y}px, 0) scaleX(${scaleX}) scaleY(${scaleY})`
            }
          )
        }}
      &gt;
        <img draggable="{false}" alt="landscape" src="{img}">
      </div>

rgb(230, 230, 230) 0%,
        rgb(255,255,255) ${(x2 * 65) / pageWidth}%,
        rgb(230, 230, 230) ${(x2 * 80) / pageWidth}%,
        rgb(217, 217, 217) ${(x2 * 88) / pageWidth}%,
        rgb(255,255,255) 100%
      )`;
                    })
                  : i !== index.value + 2 || true // TODO shadow move
                  ? `linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%,rgba(184, 184, 184, 0) 60px)`
                  : null,
              //                interpolate(
              //                  [bgRad, bgPos],
              //                  (bgRad, bgPos) =>
              //                    `linear-gradient(${90+bgRad}deg, rgb(0, 0, 0, 0.3) 0%,rgba(184, 184, 184, 0) ${300-bgPos}px)`
              //                )
              WebkitClipPath: interpolate(
                [x1, y1, x2, y2, x3, y3, x4, y4, x5, y5],
                (x1, y1, x2, y2, x3, y3, x4, y4, x5, y5) => {
                  if (x5 === undefined) x5 = x4;
                  if (y5 === undefined) y5 = y4;
                  return `polygon(${x1}px ${y1}px, ${x2}px ${y2}px, ${x3}px ${y3}px, ${x4}px ${y4}px, ${x5}px ${y5}px )`;
                }
              ),

              transformOrigin: i % 2 === 0 ? pageWidth + "px 0px" : "0px 0px",
              transform: interpolate(
                [x, y, r, scaleX],
                (x, y, r, scaleX) =>
                  `translateX(${x}px) translateY(${y}px) rotate(${r}rad) scaleX(${scaleX})`
              )
            }}
            className={`page page--${i} `}

{
            const animationInProgress = x !== 0 || y !== 0
            if (isSelected) return 5
            if (zIndexQueue.slice(-1)[0] === id && animationInProgress) return 5
            if (zIndexQueue.indexOf(id) > -1 && animationInProgress) return 2
            return 1
          }),
          transform: interpolate(
            [x, y, scaleX, scaleY],
            (x, y, scaleX, scaleY) => {
              return `translate3d(${x}px, ${y}px, 0) scaleX(${scaleX}) scaleY(${scaleY})`
            }
          )
        }}
      >
        <img draggable="{false}" alt="landscape" src="{img}">
      
    
  )
}

{({x}) => (
             `translate(${x}`)
              }}
            >
              {children}
            
          )}

left: 0,
            pointerEvents: isOpen ? "auto" : "none",
            right: 0,
            bottom: 0,
            background: theme.colors.background.overlay
          }}
        />
         {
            e.stopPropagation();
          }}
          style={{
            transform: interpolate([x, y], (x, y) => {
              return `
                translateX(${taper(x, position)}px) 
                translateY(${taper(y, position)}px)
              `;
            })
          }}
          css={[
            {
              outline: "none",
              zIndex: theme.zIndices.modal,
              opacity: 1,
              position: "fixed"
            },
            positionsStyle[position]
          ]}
          {...props}

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)`
  )

cell = ({ key, object }, i) => ({ opacity, x, y, width, height }) => {
    const { lastOpen, curOpen } = this.state
    const { open } = this.props
    return (
       `translate3d(${x}px,${y}px, 0)`
          ),
        }}
        children={this.props.children(
          object,
          curOpen === key,
          open !== undefined && (() => this.toggle(key))
        )}
      />
    )
  }