<ErrorBoundary> not working as intended when using useSuspenseQuery

[GarrisonBates]

I'm trying to set up my app to useSuspenseQuery but I'm running into issues with the error handling. I read the latest docs and to my knowledge I'm doing everything as prescribed. I've set up a minimal recreation of the issue.

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'


export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      gcTime: Infinity,
    },
  },
})

export default function App() {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
              <ErrorBoundary fallbackRender={() => <>Test</>}>
                    <Suspense fallback={<>Loading...</>}>
                          <Test />
                    </Suspense>
              </ErrorBoundary>
      </QueryClientProvider>
    </ErrorBoundary>
  )
}

I have my query:

export const useTest = () => {
  const query = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: () => {
      return dataSource.fetchData('')
    },
  })
  return query
}

...where dataSource.fetchGroups just makes an API call to an endpoint that throws 404 error.

And finally, I have my component:

import { useTest } from './service/external/api/fetch/useTest'

const Test = () => {
  const { data } = useTest()
  return <>{JSON.stringify(data)}</>
}

// export default withSuspenseTest(Test)
export default Test

When fetching, it displays the loading fallback as expected, and the query retries twice as expected. But after the retries fail, instead of displaying fallbackRender as expected, the error propagates all the way up. So basically, I get three of these:

GET http://localhost:8080/test 404 (Not Found)

And then this:

Warning: Cannot update a component (`ErrorBoundary`) while rendering a different component (`Test`). To locate the bad setState() call inside `Test`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
    at Test (Test.tsx:4:20)
    at Suspense (<anonymous>)
    at ErrorBoundary (react-error-boundary.js?v=a233d351:22:5)

And then 2 of these:

@tanstack_react-query.js?v=a233d351:3120 Uncaught 
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

I'm sure I'm doing something wrong here, but I can't tell what. I've looked at the suspense example:
https://github.com/TanStack/query/tree/main/examples/react/suspense

And the docs, but I can't figure out what's going on here. Any help would be massively appreciated. Thank you!

[GarrisonBates]

Figured it out. Had a custom that was causing issues.