search param not updating the loaderData on route change!

export const Route = createFileRoute("/c/$slug")({
  component: RouteComponent,
  validateSearch: (search) => SearchQuerySchema.parse(search),
  beforeLoad: ({ search, params }) => {
    const slug = params.slug;

    if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith(endSlug)) {
      throw notFound();
    }

    return {
      page: search.page || 1,
      perPage: search.perPage || 24,
    };
  },
  loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const imageData = await context.queryClient.fetchQuery(
      context.trpc.images.categoryImageList.queryOptions({
        page,
        perPage,
        category,
      })
    );

    const categorySpintex = getCategorySpintax(
      category.replaceAll("-", " ") ?? ""
    );

    const start = (Number(page) - 1) * Number(perPage); // 0, 5, 10 ...
    const end = start + Number(perPage); // 5, 10, 15 ...

    return {
      category: category || "",
      categorySpintex,
      images: imageData.images,
      page: imageData.page,
      perPage: imageData.pageSize,
      total: imageData.total,
      start,
      end,
    };
  }
});

  const {
    category: categoryName,
    categorySpintex,
    images: categoryData,
    page,
    perPage,
    total,
    start,
    end,
  } = Route.useLoaderData();