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

const selected = useSelector(
    (state) => state.street.environment || DEFAULT_ENVIRONS
  )
  const show = useSelector((state) => state.ui.toolboxVisible || false)
  const dispatch = useDispatch()

  const handleClick = (event, env) => {
    dispatch(setEnvironment(env.id))
  }

  const handleClose = (event) => {
    dispatch(toggleToolbox())
  }

  const envs = getAllEnvirons()
  const transitions = useTransition(show, null, {
    from: { opacity: 0, transform: 'scale(0.75)', pointerEvents: 'none' },
    enter: { opacity: 1, transform: 'scale(1)', pointerEvents: 'auto' },
    leave: { opacity: 0, transform: 'scale(0.85)', pointerEvents: 'none' },
    config: { tension: 600, velocity: 20, clamp: true }
  })

  return transitions.map(
    ({ item, key, props }) =>
      item && (
        
          {/* Two containers are necessary because different libraries are applying CSS transforms */}
          {/* Outer container is transformed by Draggable's position */}
          <div>
            {/* Inner container contains transition styles from Transition */}
            </div>

}, [props.alerts])

  const transitionConfigs: any = {
    from: { height: 0, opacity: 0, life: "100%" },
    enter: (item: AlertProps) => async (next: any) =>
      await next({ height: refMap.get(item).offsetHeight, opacity: 1 }),
    leave: (item: AlertProps) => async (next: any, cancel: any) => {
      cancelMap.set(item, cancel)
      await next({ life: "0%" })
      await next({ opacity: 0 })
      await next({ height: 0 })
    },
    config: config,
  }

  const transitionProps = useTransition(
    alerts,
    item => item.key as string,
    transitionConfigs
  )

  // Return container based on placement prop
  const getWrapper = () => {
    switch (props.placement) {
      case "topLeft":
        return TopLeftBox
      case "topRight":
        return TopRightBox
      case "bottomLeft":
        return BottomLeftBox
      case "bottomRight":
        return BottomRightBox

const App = props => {
  const { location } = useRouter();
  const transitions = useTransition(location, location => location.pathname, {
    from: {
      opacity: location.pathname !== "/" ? 0 : 1,
      transform: "translateX(0%)"
    },
    enter: { opacity: 1, transform: "translateX(0%)" },
    leave: { opacity: 0, transform: "translateX(-20%)", delay: 0 }
  });
  return transitions.map(({ item, props, key }) => (

function GameOrder() {
  const orders = useSelector(state => state.gameStatus.orders, shallowEqual);

  const ordersTransition = useTransition(orders, item => item.name, {
    config: config.wobbly,
    trail: 100,
    from: { height: 44, opacity: 1, transform: "scale(1) translateX(-110%)" },
    enter: { transform: "scale(1) translateX(0%)" },
    leave: {
      height: 0,
      opacity: 0,
      transform: "scale(0) translateX(0%)"
    }
  });

  function renderOrders() {
    return ordersTransition.map(({ item, props, key }) => {
      return (

const Transition = props => {
  const transitions = useTransition([props], item => item.location.pathname, {
    from: { opacity: 0, transform: 'translateY(60px)' },
    enter: { opacity: 1, transform: 'translateY(0px)' },
    leave: { opacity: 0, transform: 'translateY(30px)' },
  })

  return transitions.map(({ item, props: styles, key }) => (
    
      {item.children}
    
  ))
}

updateState(draft => {
        draft[modalId] = {factory(callback)}
      })
    })

    return {
      abort: () => unmount(),
      promise: promise as Promise,
      then: (fullfiled: any, rejected: any): any => {
        return promise.then(fullfiled, rejected)
      },
    }
  }, [])

  const modalsArray = useMemo(() => Object.entries(modals), [modals])
  const transitions = useTransition(modalsArray.length > 0, null, {
    from: {
      backdropFilter: 'blur(0px)',
      opacity: 0,
      pointerEvents: 'none',
    },
    enter: {
      backdropFilter: 'blur(2px)',
      opacity: 1,
      pointerEvents: 'all',
    },
    leave: {
      backdropFilter: 'blur(0px)',
      opacity: 0,
      pointerEvents: 'none',
    },
  })

const [show, setShow] = React.useState(true)

    const { inRendering, status } = useStore([RendererStore], getStore => ({
        inRendering: getStore(RendererStore).isInRendering(),
        status: getStore(RendererStore).getExportingState(),
    }))

    const handleClickDone = React.useCallback(() => {
        setShow(false)
    }, [])

    React.useEffect(() => {
        setShow(true)
    }, [inRendering])

    const transitions = useTransition(show && !!status, null, {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
    })

    return (
        <>
            {transitions.map(
                ({ item, key, props: style }) =>
                    item && (
                        
                            {status.step === RenderingStep.Completed ? (
                                <>
                                    <div>
                                        <img src="{require('./parrot.gif')}">
                                        <div>{statusToText(status)}</div></div>

const Screenshots = props => {
  const [index, setIndex] = useState(0)
  const onClick = useCallback(
    () => setIndex(state => (state + 1) % screenshotsUrls.length),
    []
  )

  const transitions = useTransition(index, p => p, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: {
      duration: speed.quickly
    }
  })

  const blockOne = (
    <legend title="Turn websites into a snapshot">
  )

  const blockTwo = (
    
      
        </legend>

export default function MultiStageTransition() {
  const ref = useRef([])
  const [items, set] = useState([])

  const transitions = useTransition(items, null, {
    from: {
      opacity: 0,
      height: 0,
      innerHeight: 0,
      transform: 'perspective(600px) rotateX(0deg)',
      color: '#8fa5b6',
    },
    enter: [
      { opacity: 1, height: 50, innerHeight: 50 },
      { transform: 'perspective(600px) rotateX(180deg)', color: '#28d79f' },
      { transform: 'perspective(600px) rotateX(0deg)' },
    ],
    leave: [
      { color: '#c23369' },
      { innerHeight: 0 },
      { opacity: 0, height: 0 },