Having two Image types in React TypeScript one for upload, one for display

Question

I've ran into an issue, where I have to use two types for images, one for upload the other one for display, currently I haven't implemented the upload functionality(form with image input), but It would require the use of File type in TypeScript, my ProductImage type looks like this:

ProductImage.ts

export type ProductImage = {
    productId: string;
    productImageId: string;
    productImageFileName: string;
    productImageUrlPath: string;
}

And is being used in the Product class:

Product.ts

export type Product = {
    name: string;
    productId:string;
    price: number;
    manufacturer: string;
    model: string;
    year: Date;
    location: string;
    category: string;
    description: string;
    workedHours: number;
    state: string;
    hoursUnderPower: number;
    atlocalNorms: boolean;
    status: string;
    createdBy: UserInfo;
    productImages: ProductImage[];
}

The issue arises with the POST request, the backend needs an image file, not file data used for display

POST REQUEST

export const usePostProductMutation = () =>
    useMutation({
        mutationFn: async (product: {
            name: string;
            price: number;
            manufacturer: string;
            model: string;
            year: number;
            location: string;
            category: string;
            description: string;
            workedHours: number;
            state: string;
            hoursUnderPower: number;
            atlocalNorms: boolean;
            status: string;
            createdBy: UserInfo;
            productImages: File[];
        }) => 
            (
                await apiClient.post<{message: string; product: Product}>(
                    `api/products`,
                    product
                )
            ).data
    })

The question is: How should I handle this situation? Create a separate upload type? Somehow convert File into ProductImage?