`[File]` is stringified to `[object File]`

I am writing a file selection form that each time a file is selected, that file will be added to the existing file array. My intention is to submit that array via the form, but after submitting, the array is stringified. I don't know how to handle it, please help me.

This is my code:

<script lang="ts">    let selectedFiles: File[] = [];    function handleSubmit(e: any) {        errorCode = validate(selectedFiles);        if (errorCode) {            console.log(errorCode);            e.preventDefault();        }    }    function handleFileSelect(e: any) {        selectedFiles = [...selectedFiles, e.target.files[0]];    }    // Create ref to DOM element    let fileInput: HTMLInputElement;</script><form action="?/submit" method="post" on:submit={handleSubmit}><div><label for="files">Click "+" to add file</label><button on:click={(e) => {e.preventDefault(); fileInput.click();}}><span>+</span></button><input type="file" accept={allowedExtensions} on:change={handleFileSelect} on:invalid={handleInvalid} bind:this={fileInput} hidden/><input type="hidden" name="contest" value={contest.id} /><input type="hidden" name="user" value={data.user.id} /><input type="hidden" name="files" value={selectedFiles} /><p>Selected files: {getFileNames(selectedFiles).join(', ')}</p><br /><button type="submit" class="btn btn-primary w-full">Submit</button></div></form>

I logged request.formData() and it came out like this:

   [Symbol(state)]: [     {       name: 'files',       value: '[object File],[object File],[object File]'     },     { name: 'contest', value: '5bvod8teq8kh7yn' },     { name: 'user', value: 'dvkw0v6uz31zag2' },     { name: 'score', value: '0' }   ]

I expected it like this:

   [Symbol(state)]: [     { name: 'files', value: [File] },     { name: 'files', value: [File] },     { name: 'files', value: [File] },     { name: 'contest', value: '5bvod8teq8kh7yn' },     { name: 'user', value: 'dvkw0v6uz31zag2' },     { name: 'score', value: '0' }   ]