how can I add a new property to my dropzone template?

Question

I'm trying to modify my Dropzone template because I need to add a new property. In all the examples that I've found, the template only displays two properties: size and filename. However, now I need to add a new property called 'usages' to show the number of times this image is used.

As I can see in 'Layout', I should create a section using data-dz-* in my template to display my property.

I'm using the template from the documentation, and I've added my new property section:

$(function () {

let template = `<div class="dz-preview dz-file-preview">
          <div class="dz-details">
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
            <div data-dz-usages></div>   //<---------- new property section
            <img data-dz-thumbnail />
          </div>
          <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
          <div class="dz-success-mark"><span>✔</span></div>
          <div class="dz-error-mark"><span>✘</span></div>
          <div class="dz-error-message"><span data-dz-errormessage></span></div>
        </div>`;
        
        
        
 //creating dropzone object
 myDropzone = new Dropzone("div#dropZone", {
        previewTemplate: template,
        init: function () {
            this.on("addedfile", function (file) {

                // The images that come from the server have the 'usages' property
                // but those that are recently uploaded do not, which is why it 
                // is assigned zero.

                if(file.usages == undefined){
                    file.usages = 0;
                }


                // I can see that all files really have 'usages' property.
                console.log(file)
                }
            });
        },
    });
})

But the DOM doesn't display the value; it remains empty ''.

I had to add the following code to manage to show the value:

 myDropzone = new Dropzone("div#dropZone", {
        previewTemplate: template,
        init: function () {
            this.on("addedfile", function (file) {
                if(file.usages == undefined){
                    file.usages = 0;
                }
                
                // i get the 'div' and put the value
                var thumbnail = file.previewElement.querySelector("[data-dz-usages]");
                if (thumbnail) {
                    thumbnail.textContent = file.usages;
                }
                }
            });
        },
    });

My question is: Is this really the solution, or is there another way to achieve this?"