Can Somebody explain why the files of the DataTransfer is not showing at all?

Question

I am trying to add files to an input file but when I do console the dataTransfer I do see the files and when I access the files it return basically nothing and I can see the files when I console log them before accessing them through .files

_dataFiles = new DataTransfer();
            var images = document.querySelectorAll("#UpdatePostModal .post-images__child img")
            images.forEach((img, index) => {
                var _ImgName = img.currentSrc.split("/").at(-1)
                // the srcToFile function will return a promise
                // so we need to call the then method to get the result which is a file
                srcToFile(img.currentSrc, _ImgName, "image/jpeg").then(
                    function (file) {
                        _dataFiles.items.add(file);
                    }
                );
            })
            console.log(_dataFiles) here I can see the files and their length 
            console.log(_dataFiles.files)// but I get nothing length 0
            var image_input = $(updateFormLocal).find("#id_images")[0];
            console.log(image_input.files)

What am i doing wrong by the way here the srcToFile function.

function srcToFile(src, fileName, mimeType) {
    return (fetch(src)
        .then(function (res) { return res.arrayBuffer(); })
        .then(function (buf) { return new File([buf], fileName, { type: mimeType }); })
    );
}