If I am using react-query and react-router, I can see the network requests happening when navigating, however the new data is not reflected in the view/page? Am I doing something wrong? I am doing lazy loading:

App.tsx

import React, { Suspense } from 'react';
import Loader from '../loader/Loader';

const App: React.FunctionComponent = () => {

  const Routing = React.lazy(() => import('../routing/Routing'));

  return (
    <>
      <Suspense fallback={<Loader />}>
        <DataProvider>
          <Routing />
        </DataProvider>
      </Suspense>
    </>
  );
}

export default App; 

router component:

import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Header from '../header/Header';
import Component1 from './Component1';
import Compontent2 from './Component2';
import { QueryClient, QueryClientProvider } from 'react-query';
import { RouteComponentProps } from "react-router-dom";

const queryClient = new QueryClient()

const Routing: React.FunctionComponent = () => {

  return (
    <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <Header />
      <div className="App">
        <Switch>
          <Route exact path="/" component={Component1} />
          <Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Component2 {...props}/>} />
        </Switch>
      </div>
    </BrowserRouter>
    </QueryClientProvider>
  )
}

export default Routing;

Component 1

const fetchAll = async () => {
        const res = await fetch('https:xxxxxx/xxxxx');
        return res.json();
    };

    const { data: result, status } = useQuery('info', fetchAll, {
        staleTime: 0,
    });

component 2 is using the same approach the react-query stuff is not in useEffect of anything?

How can I get the view to re-render on navigation and show the new data.