Keep page state on navigating back from a product to the product list

"use client";
import { Suspense, useState } from "react";

import { api } from "~/trpc/react";
...

export function ProductList({ collection }: { collection: Collection }) {
  const [sortOption, setSortOption] = useState<SortOption>(sortOptions[1]!);

  const [products] = api.product.getFromCollection.useSuspenseQuery(
    {
      collection: collection.handle,
      sortKey: sortOption.key,
      reverse: sortOption.reverse,
    },
  );

...
          {/* Product List wrapped in a suspense */}
          <div className="grid w-full gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            <Suspense
              fallback={Array.from({ length: 12 }, (_, key) =>
                key.toString(),
              ).map((key) => (
                <Skeleton
                  key={key}
                  className="h-[20px] w-[100px] rounded-full"
                />
              ))}
            >
              {products.map((product, index) => (
                <ProductTile
                  key={product.handle}
                  product={product}
                  position={index}
                />
              ))}
            </Suspense>
          </div>
...