I am currently using react query found here: https://tanstack.com/query/latest and im starting off in a test project to try to understand it. For some reason after reading the docs and watching multiple videos on the subject my data is not being cached at all and when the page is reloaded the components displays new data everytime.

App.js

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import './App.css';
import Content from './Content';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function App() {
  const queryClient = new QueryClient();

  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <Content/>
        <ReactQueryDevtools/>
      </QueryClientProvider>
    </div>
  );
}

export default App;

Content.js

async function getRandomNumber(){
    return Math.floor(Math.random() * 10);
}

function Content() {
    const queryClient = useQueryClient();

    const {data, isError, isLoading} = useQuery({queryKey: ['random'], queryFn: getRandomNumber, staleTime: 15000})
    if(isError) return <div>Error</div>
    if(isLoading) return <div>Loading...</div>
    return (
      <div>
        {data}
      </div>
    );
}

export default Content;

each refresh im getting a new number when i should be getting the cached number than a new number when the number turns stale which i set for 15 seconds. But this doesn’t seem to work