onClientUploadComplete not working on backend adapters

import { generateReactHelpers } from "@uploadthing/react";
 
 
export const { useUploadThing, uploadFiles } =
  generateReactHelpers({
    url: "http://localhost:5000/api/uploadthing",
  }); 

....................
page.tsx
  const { startUpload, permittedFileInfo } = useUploadThing(
    "imageUploader",
    {
      onClientUploadComplete: (res) => {
        console.log(res);
        alert("uploaded successfully!");
      },
      onUploadError: () => {
        alert("error occurred while uploading");
      },
      onUploadBegin: () => {
        alert("upload has begun");
      },
    }
  );
  const handleSubmit = async () => {
    if (imageObject) {
      try {
        startUpload([imageObject]);
      } catch (err) {
        console.error("Error occurred while uploading:", err);
      }
    } else {
      console.log("No image selected.");
    }
  };

import { createUploadthing, type FileRouter } from "uploadthing/express";
 
const f = createUploadthing();
 
export const uploadRouter = {
  imageUploader: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
    },
  }).onUploadComplete((data) => {
    console.log("upload completed", data);
  }),
} satisfies FileRouter;
export type OurFileRouter = typeof uploadRouter;

.................................
import express from 'express';
import authRoutes from './routes/authRoutes';
import { createRouteHandler } from "uploadthing/express";
import { uploadRouter } from "./uploadthing";

import cors from 'cors';

const app = express();
app.use(cors());
app.use(
    "/api/uploadthing",
    createRouteHandler({
      router: uploadRouter,
      config: {
        callbackUrl: "http://localhost:5000/api/uploadthing",
      }
    }),
  );
app.use(express.json());
console.log("app.ts");
app.use('/api', authRoutes);

export default app;