I have a client component where cookies are set when clicking on buttons (with react-cookie lib). It also receives a server component as props. Something like:

"use client"
import { useRouter } from 'next/navigation';
import { useCookies } from 'react-cookie';


export default function Panel({
    children,
}: {
    children: React.ReactNode
}) {
    const router = useRouter();
    const [cookies, setCookie] = useCookies(['pageNumber']);

    return (
        <div>
            <ul>
                <li>
                    <button onClick={() => {
                        setCookie('pageNumber', 1, { path: '/' });
                        router.replace("/");
                    }}>Page 1</button>
                </li>
                <li>
                    <button onClick={() => {
                        setCookie('pageNumber', 2, { path: '/' });
                        router.replace("/");
                    }}>Page 2</button>
                </li>
            </ul>


            {children}
        </div>
    );
}

The child server component access the cookies using Next.js cookies() and read and display some products from the db. Something like:

import { cookies } from 'next/headers';
import getProducts from '@/components/catalog/utils';


export default async function Products() {
    const pageNumber = Number(cookies().get('pageNumber')?.value);

    if (pageNumber) {
        const products = await getProducts(pageNumber);

        return (
            <div>
                <ul>
                    {products.map((product) => (
                        <li key={product.id}>
                            <h2>{product.name}</h2>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

Issue: when I refresh the app, I can alternate pages for a very short while by clicking on the buttons. But after this while, I can only alternate pages again if I refresh the page. Any idea ?