How to use the react-spring/three.useSpring function in react-spring

// }, [])
  // const unhover = useCallback(e => {
  //   setHover(false)
  // }, [])

  const toggle = e => {
    e.stopPropagation();
    if (selected === index) {
      selectImage(-1, 0)
    } else {
      selectImage(index, startPosition.y)
    }
    setHover(!hovered)
  }

  const { position } = useSpring({
    position: selected === index ? [0, startPosition.y, 0] : [startPosition.x, startPosition.y, startPosition.z],
    config: {
      tension: 100,
      friction: 40,
      mass: 1,
      // velocity: 5
    }
  })

  // useRender(() =>{
  //   opacity = 
  // })
  // const mat = new THREE.MeshBasicMaterial({color: 'blue'});

  return (

function Thing() {
  const [active, setActive] = useState(false)
  const [hovered, setHover] = useState(false)
  const vertices = [[-1, 0, 0], [0, 1, 0], [1, 0, 0], [0, -1, 0], [-1, 0, 0]]
  // We can tap into the eco system, this uses react-spring for animation
  const { color, pos, ...props } = useSpring({
    color: active ? 'hotpink' : 'white',
    pos: active ? [0, 0, 2] : [0, 0, 0],
    'material-opacity': hovered ? 0.6 : 0.25,
    scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1],
    rotation: active ? [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)] : [0, 0, 0],
    config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
  })

  return (
    
      
         new THREE.Vector3(...v))} />
        
      
       setActive(!active)}

function App() {
  const [{ mouse }, set] = useSpring(() => ({ mouse: [0, 0] }));
  const onMouseMove = useCallback(({ clientX: x, clientY: y }) => set({ mouse: [x - window.innerWidth / 2, y - window.innerHeight / 2] }), []);
  const [loaded, setLoaded] = useState(false);
  const imageLoader = useMemo(() => new ImageLoader(data, setLoaded), [data])
  const cameraControl = useYScroll([0, 100], { domTarget: window })
  return (
    <>
      {
        loaded === true ?
          <>
            <canvas>
              
            </canvas>
            
            {/*  */}

let springConfig = getSpringConfigForLight(
    [ON_PROPS, OFF_PROPS, BRIGHT_PROPS],
    status
  );

  useOnChange(() => {
    if (!isPlaying) {
      return;
    }
    const statusShouldReset = status === 'flash' || status === 'fade';

    springConfig.reset = statusShouldReset;
  }, lastEventId);

  const spring = useSpring(springConfig);

  // When blooming, the `c` uniform makes it white and obnoxious, so tune the
  // effect down in this case.
  const MAX_C_VALUE = isBlooming ? 0.2 : 0.001;

  return (

function Image({ url1, position = [0, 0, 0], ...props }) {
  const { invalidate, size, viewport } = useThree()
  const texture = useMemo(() => {
    const texture = loader.load(url1, invalidate)
    texture.minFilter = THREE.LinearFilter
    return texture
  }, [url1])

  const [{ xy }, setXY] = useSpring(() => ({ xy: [0, 0] }))
  const [active, set] = useState(false)
  const animatedProps = useSpring({ rotation: [0, 0, active ? Math.PI / 4 : 0] })
  const hover = useCallback(e => {
    e.stopPropagation()
    console.log('hover', e.object.uuid)
  }, [])
  const unhover = useCallback(e => console.log('unhover', e.object.uuid), [])
  const move = useCallback(e => {
    event.stopPropagation()
    if (e.buttons > 0) setXY({ xy: [e.ray.direction.x, e.ray.direction.y] })
    //console.log('move', e.ray.direction)
  }, [])
  const click = useCallback(e => {
    e.stopPropagation()
    console.log('click', e)
    set(active => !active)
  }, [])

function Icosahedron({ position, rotation }) {
  const [{ xy, size }, set] = useSpring(() => ({ xy: [0, 0], size: 1 }))
  const bind = useGesture({
    onDrag: ({ event, local }) => void (event.stopPropagation(), set({ xy: local })),
    onHover: ({ event, active }) => void (event.stopPropagation(), set({ size: active ? 1.2 : 1 })),
    onWheel: ({ event, velocity }) => void (event.stopPropagation(), set({ size: Math.max(1, velocity * 3) })),
  })
  return (
     [x + position[0], y + position[1], position[2]])}
      rotation={rotation}
      scale={size.interpolate(s => [s, s, s])}>
      
      
    
  )
}

const Logo = ({ size = 'full', color = '#FFF' }) => {
  const [isHovering, setIsHovering] = React.useState(false);

  const spring = useSpring({
    rotation: [0, isHovering ? 0 : -0.35, 0],
    config: { tension: 200, friction: 50 },
  });

  return (
     setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >

let springConfig = getSpringConfigForLight(
    [ON_PROPS, OFF_PROPS, BRIGHT_PROPS],
    status
  );

  useOnChange(() => {
    if (!isPlaying) {
      return;
    }

    const statusShouldReset = status === 'flash' || status === 'fade';

    springConfig.reset = statusShouldReset;
  }, lastEventId);

  const spring = useSpring(springConfig);

  return (
    
      
        
        
      
    
  );
};

function ImageWebgl({ url1, url2, disp, intensity, hovered }) {
  const { progress } = useSpring({ progress: hovered ? 1 : 0 })
  const { gl, invalidate, viewport } = useThree()

  const args = useMemo(() => {
    const loader = new THREE.TextureLoader()
    const texture1 = loader.load(url1, invalidate)
    const texture2 = loader.load(url2, invalidate)
    const dispTexture = loader.load(disp, invalidate)

    dispTexture.wrapS = dispTexture.wrapT = THREE.RepeatWrapping
    texture1.magFilter = texture2.magFilter = THREE.LinearFilter
    texture1.minFilter = texture2.minFilter = THREE.LinearFilter

    texture1.anisotropy = gl.capabilities.getMaxAnisotropy()
    texture2.anisotropy = gl.capabilities.getMaxAnisotropy()
    return {
      uniforms: {

const springConfig = getSpringConfigForLight(
    [ON_PROPS, OFF_PROPS, BRIGHT_PROPS],
    status
  );

  useOnChange(() => {
    if (!isPlaying) {
      return;
    }

    const statusShouldReset = status === 'flash' || status === 'fade';

    springConfig.reset = statusShouldReset;
  }, lastEventId);

  const spring = useSpring(springConfig);

  const z = -85;

  const hatSideLength = 5;
  const hatThickness = 0.5;

  return (
    <>