Files uploaded, but client and server never reach onUploadComplete

<UploadButton
  endpoint="inputSource"
  onClientUploadComplete={() => {
    refetch();
  }}
  onUploadError={(error: Error) => {
    console.log('upload error', error);
  }}
  className="my-4"
/>

import { createRouteHandler } from 'uploadthing/next';
import { uploadRouter } from './core';

export const { GET, POST } = createRouteHandler({
  router: uploadRouter,
});

export const uploadRouter = {
  inputSource: f({
    image: {
      maxFileSize: '8MB',
      maxFileCount: 1,
    },
  })
    .middleware(async () => {
      const { userId } = await auth();
      if (!userId) throw new UploadThingError('Unauthorized');
      return { userId };
    })
    .onUploadComplete(async ({ file }) => {
      const caller = appRouter.createCaller(await createTRPCContext());
      const { error } = await tryCatch(
        caller.input.createInputSource({
          url: file.ufsUrl,
          type: 'IMAGE',
        }),
      );
      if (error) throw new UploadThingError(error.message);
    }),
} satisfies FileRouter;