Always stay in suspense fallback with react-query

Question

Whenever browser is refreshed, the screen using react-query stay suspense fallback and doesn't go to lazy loading screen. and when routing from another screen, It shows.

• react : 18.2.0
• react-router : 6.4.2
• react-query: 3.39.2

Example)

1. lazy(() => import('@/screens/Customers'))
2. Set routes

<Suspense fallback={<Loading isSuspense />}>
  <Routes >
    <Route /> // Customer screen
  </Routes>
</Suspense>

3. Call react-query in Customer screen

const dataResult = useQueries([
    {
      queryKey: ['groups'],
      queryFn: api.groups.get,
    },
    {
      queryKey: ['myGroup'],
      queryFn: api.group.get,
    },
  ]);

4. set useState of groups and my group and use with Mui 5 Select