Problems Creating GIFs with gif.js Library

I'm experiencing problems creating a GIF using gif.js with images generated from html2canvas. I have a list of divs that I convert into images and store in an array. However, when I try to create the GIF from these images, the GIF is not exported or displayed correctly.

Here’s a simplified version of my code:

function createGifFromList() {    // make sure listaImagenes is defined and filled with PNG data    if (!Array.isArray(listaImagenes) || listaImagenes.length === 0) {        document.getElementById('reporte2').innerText = 'the image list is empty';        return;    }    // create a new GIF using gif.js    const gif = new GIF({        workers: 2,        quality: 10    });    // load and add each image to the GIF    listaImagenes.forEach((imgDataUrl) => {        const img = new Image();        img.src = imgDataUrl;        img.onload = () => {            gif.addFrame(img, { delay: 500 }); // add each image with a delay of 500ms        };    });    // when all images have been added    gif.on('finished', function(blob) {        // create a download link for the GIF        const url = URL.createObjectURL(blob);        const a = document.createElement('a');        a.href = url;        a.download = 'myAnimatedGif.gif';        a.click();        // display the gif in the frames container        const framesContainer = document.getElementById('framesContainer');        const imgElement = document.createElement('img');        imgElement.src = url;        framesContainer.innerHTML = ''; // clear the container        framesContainer.appendChild(imgElement);    });    // render the GIF    gif.render();}

"I would like to be able to export the GIF or display it in framesContainer."