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

export default function App() {
  const [open, set] = useState(false)

  // 1. create spring-refs, which will refer to the springs Controller
  const springRef = useRef()
  const { size, opacity, ...rest } = useSpring({
    from: { size: '20%', background: 'hotpink' },
    size: open ? '80%' : '20%',
    background: open ? 'white' : 'hotpink',
    config: { ...config.stiff, precision: 0.01 },
    ref: springRef,
  })

  // 2. create transition-refs
  const transRef = useRef()
  const transitions = useTransition(open ? data : [], item => item.name, {
    from: { opacity: 0, transform: 'scale(0)' },
    enter: { opacity: 1, transform: 'scale(1)' },
    leave: { opacity: 0, transform: 'scale(0)' },
    trail: 400 / data.length,
    config: { ...config.stiff, precision: 0.01, cancelDelay: true },
    unique: true,

const HeaderLoadingIndicator: React.FC = ({ loading, label, ratio, ...props }) => {
  const [prevLabel, setPrevLabel] = useState(undefined);

  if (label !== prevLabel) {
    setPrevLabel(label);
  }
  const spring = useSpring({
    backgroundColor: loading ? properties.colorsValue.grayDark : properties.colorsBlanding.accent,
  });
  const trans = useTransition([label, prevLabel], t => t || '', {
    from: { opacity: 0, transform: `translate3d(0, -100%, 0)` },
    enter: { opacity: 1, transform: `translate3d(0, 0, 0)` },
    // tslint:disable-next-line:jsx-alignment
    leave: { opacity: 0, transform: `translate3d(0, 100%, 0)` },
  });
  return (
    
      
        <content>
          {loading ?  : undefined}
          
            {trans.map(({ item, props, key }) =&gt; (
              <label style="{props}"></label></content>

export default function Lock() {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
  const axis = React.useRef()
  const bind = useDrag(
    ({
      last,
      movement: [mx, my],
      direction: [dx, dy],
      memo = [x.getValue(), y.getValue()],
    }) => {
      if (!axis.current) {
        if (Math.abs(dx) > Math.abs(dy)) axis.current = 'x'
        else if (Math.abs(dy) > Math.abs(dx)) axis.current = 'y'
      }

      if (axis.current === 'x') set({ x: memo[0] + mx, immediate: true })
      else if (axis.current === 'y') set({ y: memo[1] + my, immediate: true })

file(name: { eq: "avatar" }) {
        childImageSharp {
          fixed(width: 40, height: 40, quality: 100) {
            ...GatsbyImageSharpFixed_withWebp
          }
        }
      }
    }
  `)

  const titleProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(0, -30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const backButtonProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(-30px, 0, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const infoProps = useSpring({ config: config.slow, delay: 500, from: { opacity: 0 }, to: { opacity: 1 } })

  return (
    
      
      
        

}
  `)

  const fadeUpProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(0, 30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const fadeUpPropsDelay = useSpring({
    config: config.slow,
    delay: 250,
    from: { opacity: 0, transform: `translate3d(0, 30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const fadeProps = useSpring({ config: config.slow, from: { opacity: 0 }, to: { opacity: 1 } })
  const fadeLongProps = useSpring({ config: config.slow, delay: 600, from: { opacity: 0 }, to: { opacity: 1 } })

  return (
    
      
      <div>
        
          <div> div:not([data-placeholder='true'])": {
                height: [`100px !important`, `140px !important`],
</div></div>

const FadeIn = (props) => {
  const durationMap = {
    fast: 200,
    default: 200,
    slow: 1000
  }
  const ref = props.ref;
  const dur = props.duration || 'default'
  const style = useSpring({to: {opacity: 1}, from: {opacity: 0}, config: {duration: durationMap[dur] || props.duration}, ref})
  return {props.children}
}

export default () => {
  const [show, set] = useState(true)

  const shiftRef = useRef()
  const shift = useSpring({
    width: show ? "135px" : "0",
    height: show ? "190px" : "0",
    opacity: show ? 1 : 0,
    ref: shiftRef,
  })

  const buttonRef = useRef()
  const buttonSpring = useSpring({
    height: show ? "45px" : "60px",
    borderRadius: show ? "0px 0px 0px 15px" : "35px 35px 35px 35px",
    ref: buttonRef,
  })

  useChain([shiftRef, buttonRef], [0, 0.8, 1])

  return (

const Collapsible = ( {
	entityFilters = null,
	listId,
	perPage,
	searchText,
	setPerPage,
	setSearchText,
	showEntityFilters = false
} ) => {
	const ref = useRef();
	const { height } = useRect(ref);
	const props = useSpring({
		height: showEntityFilters ? height : 0,
		opacity: showEntityFilters ? 1 : 0
	} );

	const perPageControl = useMemo( () => (

function RecommendedWork({ work, isLoading, description }) {
  const [isHover, setHover] = useState(false);
  const { formatMessage: f } = useIntl();
  const props = useSpring({
    opacity: isHover ? 1 : 0.3,
    transform: isHover ? 'translate3d(0,0,0)' : 'translate3d(0,10px,0)'
  });
  return (
    <div>
      <h3>{f({ id: 'random', defaultMessage: 'Random' })}</h3>
      {!isLoading ? (
         setHover(true)}
          onMouseLeave={() =&gt; setHover(false)}
        &gt;
          
            
              {work.name}</div>

const Project = ({ data: { mdx: postNode }, location }) => {
  const project = postNode.frontmatter

  const titleProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: 'translate3d(0, -30px, 0)' },
    to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
  })
  const infoProps = useSpring({ config: config.slow, delay: 500, from: { opacity: 0 }, to: { opacity: 1 } })
  const contentProps = useSpring({ config: config.slow, delay: 1000, from: { opacity: 0 }, to: { opacity: 1 } })

  return (
    
      
      
        
          <img alt="">
        
        <content type="text">
          <title style="{titleProps}" data-testid="project-title">
            {project.title}
          </title>
          
            
              <div>Client</div>
              <div>{project.client}</div></content>