Validate filesize using filepond in vue.js 3

Question

I am trying to validate the size of a file using filepond in vue.js 3, there is what I have so far. everything works other than filesize validation, i looked at the issue raid on github here: https://github.com/pqina/vue-filepond/issues/112 but it seems this post is out dated, i also looked at the docs here: https://pqina.nl/filepond/docs/api/plugins/file-validate-size/ but couldn't get it to work either Note I am testing with a 2.5 mb file on Windows 11

<file-pond
            name="banner"
            ref="pond"
            label-idle="Drop image here..."
            v-bind:allow-multiple="false"
            accepted-file-types="image/jpeg, image/png"
            :allowFileSizeValidation="true"
            maxFileSize="1MB"
            labelMaxFileSizeExceeded="File is too large"
            :required="false"
            :server="{
                       url: '/tmp/image',
                       headers: {
                           'X-CSRF-TOKEN': $page.props.csrf
                       }
                }"
            @processfile="profileBanner"
            @removefile="profileBanner"
        />
import vueFilePond from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

// Create component
const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview,
    FilePondPluginImageValidateSize
);