Cache seemingly not working

const getActiveProgrammes = async () => {
    console.log("getActiveProgrammes...");
    const apiClient = getApiClient();

    const resp = await apiClient.graphql({ query: getActiveProgrammesQuery });
    if (resp.errors !== undefined && resp.errors.length > 0) {
        console.log(JSON.stringify({ errors: resp.errors }));
        throw new Error(resp.errors.map((error) => error.toJSON()).join("\n"));
    }
    console.log(
        `getActiveProgrammes done: ${JSON.stringify(
            resp.data.getActiveProgrammes
        )}`
    );
    return resp.data.getActiveProgrammes;
};

const Programmes = () => {
    const { data, error, isPending, refetch } = useQuery({
        queryFn: getActiveProgrammes,
        queryKey: ["activeProgrammes"],
        staleTime: 1000 * 30 // should cache for 30 seconds
    });


    if (isPending) return "Fetching data from backend...";
    if (error) return `An error occurred getting data: ${error.message}`;
    return <>
        <div>
            {data.length === 0 ? (
                <p>No programmes</p>
            ) : (
                data.map((programme) => (
                    ...
                ))
            )}
        </div>
        <button onClick=() => void refetch()}>Refresh Data</button>
    </>
}

const queryClient = new QueryClient();

ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <Programmes />
        </QueryClientProvider>
    </React.StrictMode>
);