resetScroll={false} only works on first click

export function ProductTypeNav({ projectId }: { projectId: number }) {
  const productTypes = ProductTypeSchema.options;
  const currentProductType = useSearch({
    from: "/p/$projectId/settings/products",
    select: (search) => search.productType,
  });

  const navigate = useNavigate();
  return (
    <>
      {/* Desktop */}
      <Tabs
        value={currentProductType ?? undefined}
        className="hidden lg:block"
        onValueChange={(value) => {
          navigate({
            to: "/p/$projectId/settings/products",
            resetScroll: false,
            search: {
              productType: value as ProductType,
            },
            params: {
              projectId,
            },
          });
        }}
      >
        <TabsList className="flex gap-2">
          {productTypes.map((pt) => (
            <TabsTrigger value={pt} key={pt}>
              {pt}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
)
}

export function ProductTypeNav({ projectId }: { projectId: number }) {
  const productTypes = ProductTypeSchema.options;
  const currentProductType = useSearch({
    from: "/p/$projectId/settings/products",
    select: (search) => search.productType,
  });

  const navigate = useNavigate();
  return (
    <>
      {/* Desktop */}
      <Tabs
        value={currentProductType ?? undefined}
        className="hidden lg:block"
        onValueChange={(value) => {
          navigate({
            to: "/p/$projectId/settings/products",
            resetScroll: false,
            search: {
              productType: value as ProductType,
            },
            params: {
              projectId,
            },
          });
        }}
      >
        <TabsList className="flex gap-2">
          {productTypes.map((pt) => (
            <TabsTrigger value={pt} key={pt}>
              {pt}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
)
}