Expo + Express on the backend | (maybeServerData ?? data)?.find is not a function

"@uploadthing/expo": "^7.2.4",
 "@uploadthing/react": "^7.3.1",
"uploadthing": "^7.7.2",
"expo-image-picker": "^16.1.4",

// uploadThing.tsx
import { generateReactNativeHelpers } from "@uploadthing/expo";
import { Alert, Pressable, Text, View } from "react-native";
import { openSettings } from "expo-linking";

export const { useImageUploader, useDocumentUploader } =
    generateReactNativeHelpers({
        /**
         * Your server url.
         * @default process.env.EXPO_PUBLIC_SERVER_URL
         * @remarks In dev we will also try to use Expo.debuggerHost
         */
        url:
            process.env.EXPO_PUBLIC_BACKEND_URL ||
            "http://localhost:4000/v1/uploadthing",
    });

// import { useImageUploader } from "@uploadthing/expo";
export function UploadButtonComponent() {
    const { openImagePicker, isUploading } = useImageUploader("imageUploader", {
        onClientUploadComplete: () => Alert.alert("Upload Completed"),
        onUploadError: (error) => Alert.alert("Upload Error", error.message),
    });

    return (
        <View>
            <Pressable
                onPress={() => {
                    openImagePicker({
                        // input, // Matches the input schema from the FileRouter endpoint
                        source: "library", // or "camera"
                        onInsufficientPermissions: () => {
                            Alert.alert(
                                "No Permissions",
                                "You need to grant permission to your Photos to use this",
                                [
                                    { text: "Dismiss" },
                                    { text: "Open Settings", onPress: openSettings },
                                ]
                            );
                        },
                    });
                }}
            >
                <Text>Select Image</Text>
            </Pressable>
        </View>
    );
}

"@uploadthing/expo": "^7.2.4",
 "@uploadthing/react": "^7.3.1",
"uploadthing": "^7.7.2",
"expo-image-picker": "^16.1.4",

// uploadThing.tsx
import { generateReactNativeHelpers } from "@uploadthing/expo";
import { Alert, Pressable, Text, View } from "react-native";
import { openSettings } from "expo-linking";

export const { useImageUploader, useDocumentUploader } =
    generateReactNativeHelpers({
        /**
         * Your server url.
         * @default process.env.EXPO_PUBLIC_SERVER_URL
         * @remarks In dev we will also try to use Expo.debuggerHost
         */
        url:
            process.env.EXPO_PUBLIC_BACKEND_URL ||
            "http://localhost:4000/v1/uploadthing",
    });

// import { useImageUploader } from "@uploadthing/expo";
export function UploadButtonComponent() {
    const { openImagePicker, isUploading } = useImageUploader("imageUploader", {
        onClientUploadComplete: () => Alert.alert("Upload Completed"),
        onUploadError: (error) => Alert.alert("Upload Error", error.message),
    });

    return (
        <View>
            <Pressable
                onPress={() => {
                    openImagePicker({
                        // input, // Matches the input schema from the FileRouter endpoint
                        source: "library", // or "camera"
                        onInsufficientPermissions: () => {
                            Alert.alert(
                                "No Permissions",
                                "You need to grant permission to your Photos to use this",
                                [
                                    { text: "Dismiss" },
                                    { text: "Open Settings", onPress: openSettings },
                                ]
                            );
                        },
                    });
                }}
            >
                <Text>Select Image</Text>
            </Pressable>
        </View>
    );
}

"uploadthing": "^7.7.2"


//uploadThing.ts
import { createUploadthing, type FileRouter } from "uploadthing/express";

const f = createUploadthing();

export const uploadRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    imageUploader: f({
        image: {
            /**
             * For full list of options and defaults, see the File Route API reference
             * @see https://docs.uploadthing.com/file-routes#route-config
             */
            maxFileSize: "4MB",
            maxFileCount: 1,
        },
    }).onUploadComplete((data) => {
        console.log("upload completed", data);
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof uploadRouter;

"uploadthing": "^7.7.2"


//uploadThing.ts
import { createUploadthing, type FileRouter } from "uploadthing/express";

const f = createUploadthing();

export const uploadRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    imageUploader: f({
        image: {
            /**
             * For full list of options and defaults, see the File Route API reference
             * @see https://docs.uploadthing.com/file-routes#route-config
             */
            maxFileSize: "4MB",
            maxFileCount: 1,
        },
    }).onUploadComplete((data) => {
        console.log("upload completed", data);
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof uploadRouter;

// server.ts
import { createRouteHandler } from "uploadthing/express";
import { uploadRouter } from "./controllers/uploadThing";

app.use(
    "/v1/uploadthing",
    createRouteHandler({
        router: uploadRouter,
        config: {},
    }),
);

// server.ts
import { createRouteHandler } from "uploadthing/express";
import { uploadRouter } from "./controllers/uploadThing";

app.use(
    "/v1/uploadthing",
    createRouteHandler({
        router: uploadRouter,
        config: {},
    }),
);