Convex cache not functional

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { ConvexProvider } from 'convex/react'
import { ConvexQueryCacheProvider } from 'convex-helpers/react/cache'
import { App } from './App'
import { convexClient } from './features/convex/convex.client'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router
    }
}

// biome-ignore lint/style/noNonNullAssertion: <//TODO add fallback error>
createRoot(document.getElementById('app')!).render(
    <StrictMode>
        <ConvexProvider client={convexClient}>
            <ConvexQueryCacheProvider debug expiration={5 * 60 * 1000} maxIdleEntries={250}>
                <App>
                    <RouterProvider router={router} />
                </App>
            </ConvexQueryCacheProvider>
        </ConvexProvider>
    </StrictMode>,
)

export function Articles() {
    const res = usePaginatedQuery(
        api.article.functions.getMany,
        {
            order: 'asc',
        },
        {
            initialNumItems: 10,
        },
    )

    return res.results.length !== 0 ? (
        <div className="w-full h-full grid grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] auto-rows-max gap-4">
            {res.results.map((article) => (
                <Card
                    img={
                        article.previewImage !== null ? { src: article.previewImage, alt: '//TODO' } : undefined
                    }
                    key={article._id}
                    badges={article.tags.map((e) => ({ children: e.name, key: e._id, primary: true }))}
                    title={article.title}
                    description={article.excerpt}
                    href={`/articles/${article._id}`}
                ></Card>
            ))}
        </div>
    ) : (
        <div>Loading / No Data</div>
    )
}