How can I refresh my page in Next.js so that it updates the number of items in my cart?

I am working on a payment-success page in Next.js. On the payment page, I am taking in all the user information, saving it to the database and updating the cart successfully, but I am having a difficult time refreshing the front end to reflect the change in my cart. I am having to manually refresh the page to have the cart reflect the change. I tried using useeffect with location.reload, but that causes an infite loop because it keeps getting called every time it is reloaded, and I don’t know how to stop the infinite loop, and I tried using useRouter but I get an error saying “Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted”. I am still new to Next.js and tried to find answers online, but nothing seemed to work. How can I refresh the page so that it reflects my cart is empty so I don’t have to manually refresh my page to show that?

This is the page where I would ideally like to add the code to refresh the front end. I am calling revalidatePath on the backend to get rid of the cache, which I think is working fine.

"use client";

export default function PaymentSuccess({
  searchParams: { amount },
}: {
  searchParams: { amount: string };
}) {

  return (
    <main className="m-10 mx-auto max-w-6xl rounded-md border bg-gradient-to-tr from-blue-500 to-purple-500 p-10 text-center text-slate-100">
      <div className="mb-10">
        <h1 className="mb-2 text-4xl font-extrabold">Thank you!</h1>
        <h2 className="text-2xl">You successfully sent</h2>

        <div className="p-2 text-4xl font-bold">${amount}</div>
      </div>
    </main>
  );
}