SuspenseTrigger (doesn't work)

import React, {Suspense, PropsWithChildren, useState, useEffect} from 'react'

async function waitOneTick() {
  await new Promise(r => setTimeout(r, 100))
}

export default function SuspenseTrigger(props) {
  const [onLoadCalled, setOnLoadCalled] = useState(false)
  const [onCompleteCalled, setOnCompleteCalled] = useState(false)
  const [fallbackLoaded, setFallbackLoaded] = useState(false)
  const [useOtherFallback, setUseOtherFallback] = useState(false)

  useEffect(() => {
    waitOneTick().then(() => {
      if (!fallbackLoaded) {
        console.log('using other fallback')
        setUseOtherFallback(true)
      }
    })
  }, [])

  function onLoad(fallback: boolean) {
    if (fallback) {
      setFallbackLoaded(true)
    }

    setOnLoadCalled(true)

    if (props.onLoad) {
      props.onLoad()
    }
  }

  function onComplete() {
    setOnCompleteCalled(true)

    if (props.onComplete) {
      props.onComplete()
    }
  }

  async function ensureLoadCompleteCalled() {
    if (!onLoadCalled) {
      onLoad(false)
    }

    if (!onCompleteCalled) {
      onComplete()
    }
  }

  return (
    <Suspense
      fallback={
        <>
          {props.fallback}
          <Trigger
            onComplete={onComplete}
            onLoad={() => onLoad(true)}
          />
        </>
      }
    >
      {props.children}
      {useOtherFallback ? <Trigger onLoad={ensureLoadCompleteCalled} /> : null}
    </Suspense>
  )
}