Hi i am sending a group of images to the backend but it is sending as string? i am using nextjs 13.4 here is the demo of the code i used

import * as React from "react";
import { Upload } from "lucide-react";

export default function FileUpload({ files = null, selectFile }) {
    const [file, setFile] = React.useState(null);

    const onFileChange = (e) => {
        const selectedFile = e?.target?.files[0];
        if (!selectedFile) return;
        if (files) {
            selectFile([...files, selectedFile]);
        } else {
            selectFile([selectedFile]);
        }
    };

    return <>
        <div className="flex items-center justify-center w-full">
            <label for="dropzone-file"
                className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-slate-800 hover:bg-gray-100 dark:border-gray-950 dark:hover:border-gray-500 dark:hover:bg-slate-950">
                <div className="btnPrimary flex flex-row space-x-3">
                    <Upload />
                    <p>Upload photos</p>
                </div>
                <div className="text-sm text-center text-slate-600 dark:text-slate-300">
                    <p>or</p>
                    <p>Drag your file here</p>
                </div>
                <input type="file" className='hidden' onInput={onFileChange} id="dropzone-file" />
            </label>
        </div>

    </>
}