Recoil: Any way to find out which selector caused suspense?

Question

I keep having trouble finding out which component in my component tree is causing Suspense fallbacks. There are a lot of asynchronous selectors in my application and often I find my application falling back to a loader but I have no idea which selector caused it.

For example, let's say my component tree looks something like this:

<Suspense fallback={<>Loading...<>}>
   <SomeComponent>
      <ManyChildren1></ManyChildren1>
      <ManyChildren2></ManyChildren2>
      <ManyChildren3></ManyChildren3>
      {/* ... */}
   </SomeComponent>
</Suspense>

In one of the children, let's say in the ManyChilden3 component, there is a recoil selector:

const ManyChilden3 = () => {
  const myValue = useRecoilValue(myAsyncRecoilState)

  return <div>{myValue}</div>
}

Somewhere else, let's say in the ManyChildren1 component, I have a refresher to refetch the myAsyncRecoilState:

const ManyChilden1 = () => {
  const reload = useRecoilRefresher_UNSTABLE(myAsyncRecoilState)

  return <button onClick={reload}>refresh</button>
}

Now when I tap the refresh button, the whole component tree will basically disappear and be replaced with "Loading...".

This is of course the expected behavior, but my question is: Is there a way to figure out which selector or which component caused the Suspense fallback? I find this extremely hard to debug and it's really slowing down my development because I need to find these components somehow that cause suspense and wrap them in their individual Suspense so that it doesn't cause the whole application to "disappear".

Am I the only one with this problem? This really makes me question the whole Suspense API of React...