Cancel upload not working for chunked uploads

[israel-oye]

The issue

• My dropzone uploads by chunking as set in the options and also autoProcessQueue is set to false because I'm sending other formdata to the server.
• I noticed that when I upload a file and I cancel the upload, it removes from the dropzone but still sends to the server .
• I tried to cancel the upload by specifiying explicitly per the docs but the behaviour was the same
• Also the dictUploadCanceled does not display the supposed text to show after cancelling

form-handler.js

Dropzone.options.dropper = {
    paramName: "file",
    acceptedFiles: ".jpg, .png, .ico",
    addRemoveLinks: true,
    autoProcessQueue: false,
    chunking: true,
    forceChunking: true,
    url: "/upload",
    uploadMultiple: false,
    maxFiles: 1,
    maxFilesize: 1024, // megabytes
    chunkSize: 1000000, // bytes
    dictDefaultMessage: 'Drop files here to upload. <i class="fa-solid fa-cloud-arrow-up"></i>',
    dictCancelUpload: "Cancel Upload",
    dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
    dictUploadCanceled: "Upload canceled",
    dictResponseError: "Server responded with {{statusCode}} code.",
    dictRemoveFile: "Remove",
    init: function() {
        var myDropzone = this;
        this.on('error', function(file, errorMessage) {
            if (file.accepted) {
                var mypreview = document.getElementsByClassName('dz-error');
                mypreview = mypreview[mypreview.length - 1];
                mypreview.classList.toggle('dz-error');
                mypreview.classList.toggle('dz-success');
            }
        });

        this.on('sending', function(data, xhr, formData) {
            emailElem = document.querySelector('input[type=email]')
            formData.append("email", emailElem.value)
        })

        this.on('canceled', function(file) {
            return this.emit("error", file, this.options.dictUploadCanceled);   //this doesn't display anything
        })

        this.on("addedfile", function(file) {
            var removeLink = file.previewElement.querySelector(".dz-remove");

            removeLink.addEventListener("click", function(e) {
                console.log(myDropzone.UPLOADING);      //prints undefined
                e.preventDefault();
                e.stopPropagation();
                if (file.status === myDropzone.UPLOADING) {
                    console.log("Uploading..."); 
                    myDropzone.cancelUpload(file);
                } else {
                    myDropzone.removeFile(file);
                }
            });
        });

        const btn = document.querySelector("button[type=submit]");
        btn.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (confirm("Please, press OK if you have selected a relevant file for upload.") == true) {
                myDropzone.processQueue();
            } else {
                alert("Please select relevant file for upload.")
            }
        })

    },
    success: function(file, response) {
        const alertString = `<div class="alert alert-danger mt-4 mx-5 py-2 text-center fw-bold" role="alert">Success message</div>`

        const parser = new DOMParser();
        const doc = parser.parseFromString(alertString, "text/html");
        const alertElem = doc.querySelector('div')
        document.body.insertAdjacentElement("afterbegin", alertElem)
        return file.previewElement.classList.add("dz-success");

    },
    canceled: function(file) {
        return this.emit("error", file, this.options.dictUploadCanceled);
    }
}

This is the form if necessary:

<div class="container p-3">
    <form class="py-3 " action="/upload" method="post" id="" enctype="multipart/form-data">

        <div class="mb-2">
            <input class="form-control" type="email" name="email" id="" value="Email">
        </div>
        <div class="dropzone dz-clickable" id="dropper">
                <!-- Dropzone -->
        </div>
        <button class="btn btn-primary" type="submit">Upload</button>
    </form>

Screenshots

As shown in the terminal, dropzone uploads the file to the backend despite cancelling.