Form progess always 100%

I'm using the Inertia form helper and as I'm uploading images I've decided to use the progress bar as documented (I think!). However, once I submit my form, the bar displays at 100% immediately. I've inspected the value of form.progress.percentage and it's set to 100 as soon as I submit the form.

Interestingly though form.processing does remain true throughout the process.

Any thoughts? TIA

(apologies for the ugly layout, still lots to tidy up in here after I have it working)

<script setup>
import InputError from '@/Components/InputError.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { useForm} from '@inertiajs/vue3';
import DragAndDropMedia from './DragAndDropMedia.vue';
import PlusIcon from '@/Components/Media/Icons/PlusIcon.vue'
import ImagesIcon from '@/Components/Media/Icons/ImagesIcon.vue'
import CrossIcon from '@/Components/Media/Icons/CrossIcon.vue'
import { ref } from 'vue';

const form = useForm({
    message: null,
    images: []
});

const showMediaUpload = ref(false);

function addFiles(files){

    for (let i = 0; i < files.length; i++) {
        form.images.push(files[i]);
    }
}

function cancelMedia(){
    form.images = [];
    showMediaUpload.value=false;
}

const fileInput = ref(null);

const openFileInput = () => {
  fileInput.value.click();
};

const handleFileSelection = (event) => {
    addFiles(event.target.files);
};

const createPost = () => {
    form.post(route('post.store'), {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();
            showMediaUpload.value=false;
        },
        onError: () => {
            //TODO Error implementation
        },
    });
};
</script>

<template>
    <section>
        <form @submit.prevent="createPost" class="mt-6 space-y-6">
            <div>

                <TextInput
                    id="message"
                    type="textarea"
                    rows="3"
                    class="mt-1 block w-full"
                    v-model="form.message"
                    required
                    autofocus
                    autocomplete="message"
                    :placeholder="'Hi ' +  $page.props.auth.user.name + ', what\'s on your mind?'"
                />



                <InputError class="mt-2" :message="form.errors.message" />
            </div>

            <div class="flex items-center gap-4">
                <PrimaryButton :disabled="form.processing">Share</PrimaryButton>
                <input type="file" ref="fileInput" style="display: none" @change="handleFileSelection" multiple>
                <PlusIcon v-if="!showMediaUpload" @click="showMediaUpload=true" width="30" height="30"/>

                <DragAndDropMedia
                    v-else
                    v-slot="slotProps"
                    @files-dropped="addFiles"
                    class="w-full"
                >
                        <div
                            class="p-8 flex items-center gap-4 rounded-md relative"
                            :class="{
                                'bg-gray-200' : !slotProps.dropZoneActive,
                                'bg-blue-200' : slotProps.dropZoneActive
                            }"
                            @click="openFileInput"
                        >
                            <ImagesIcon width="50" height="50"/>
                            {{ slotProps.dropZoneActive ? 'let go' : 'Drag and Drop or Click (' + form.images.length + ')'}}
                            <div class="absolute top-2 right-2" @click.stop="cancelMedia">
                                <CrossIcon width="20" height="20" fill="red"/>
                            </div>
                        </div>
                </DragAndDropMedia>
                <progress v-if="form.progress" :value="form.progress.percentage" max="100">
                        {{ form.progress.percentage }}%
                </progress>

                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
                    <p v-if="form.recentlySuccessful" class="text-sm text-white bg-green-700 px-2 py-1 rounded-md">Thanks!</p>
                </Transition>
            </div>
        </form>
    </section>
</template>