Using two useSwrInfinite hooks in a single infinite scroll not calling second hook - react

I am trying to build a single InfiniteScroll that renders cards from two different paginated data sources. When the user scrolls down to reveal more data, the infinite scroll should request another page of results from the first data source if there are more to render, otherwise it should request another page of results from the second data source. To do this I'm calling useSwrInfinite twice in the same hook, e.g.

const useInfiniteFetchAlphasAndBetas = () => {
   const alphaData = useSwrInfinite( ... FETCH_ALPHAS_URL)
   const betaData = useSwrInfinite( ... FETCH_BETAS_URL)

   const hasMoreAlphaResults = alphaData?.length ? alphaData[alphaData.length - 1].pageInfo?.hasNextPage : false
   const hasMoreBetaResults = betaData?.length ? betaData[betaData.length - 1].pageInfo?.hasNextPage : false

   const hasMoreResults = hasMoreAlphaResults || hasMoreBetaResults

   const handleLoadMoreItems = () => {
     if(hasMoreAlphaResults) alphaData.setSize(alphaData.size + 1)
     else if(hasMoreBetaResults) betaData.setSize(betaData.size + 1)
   }

   return { alphaData, betaData, hasMoreResults, handleLoadMoreItems}
}

My issue is that while the load-more results logic appears to be working, only the alpha useSwrInfinite hook is actually fetching; the beta hook is not fetching at all. If I switch the order and call the beta useSwrInfinite hook first, the alpha hook is never called.

Is it not possible to call more than one useSwrInfinite hook at the same time?

Here is a CodeSandbox that tries to demonstrate the main issue.

Danila answered this. My issue was that the two useSwrInfinite hooks had the same key and were not being stored as separate caches. Rookie mistake, thank you.