Trouble sending a formData object containing a JSON file and strings received via flowbite-svelte's file-input component to a FastAPI backend?

Question

I have a form made through flowbite-svelte that takes in a JSON file, and two other fields (strings). I am packaging it as a formData object and am trying to send it to backend where it is parsed. However, I am getting a 422 Unprocessable Entity error. I am sending a POST request, and these are the parameters of the function in the corresponding backend route:

(selectedFile: UploadFile = File(...), propertyId: str = Form(...), startDate: str = Form(...))

In my svelte code, I wrote:

<Label class="space-y-2 mb-2">
    <span>JSON</span>
    <Fileupload bind:value={selectedFile}/>
</Label>
<Label>
    <span>ID</span>
    <Input placeholder="123456789" bind:value={propertyId} required/>
</Label>
<Label>
    <span>Date</span>
    <Input placeholder="YYYY-MM-DD" bind:value={startDate} required/>
</Label>

In my script, I initialized and sent the formData this way:

const formData = new FormData();
formData.append('jsonFile', selectedFile);
formData.append('propertyId', propertyId);
formData.append('startDate', startDate);
const response = await fetch(`${serverUrl}/route`, {
    method: 'POST',
    body: formData,
});

I handled the backend this way:

async def upload_and_validate_data(selectedFile: UploadFile = File(...), propertyId: str = Form(...), startDate: str = Form(...)):
    try:
        content = await selectedFile.read()
        json_data = json.loads(content)
        return {"message": "Data uploaded successfully and validated."}