Unknown background green lines in React downloaded image?

I'm using the below code to download screenshots of my application:

download = filename => {
            const a = document.createElement('a');
            a.download = filename;
            getDownloadURL().then(url => {
              a.href = url;
              document.body.appendChild(a);
              a.click();
              a.remove();
            });
        };

getDownloadURL = async () => {
          const svg = document.querySelector('#widget svg'),
            canvas = new OffscreenCanvas(svg.clientWidth * 3, svg.clientHeight * 3),
            svgString = new XMLSerializer().serializeToString(svg),
            ctx = canvas.getContext('2d'),
            v = await Canvg.fromString(ctx, svgString, presets.offscreen());

          await v.render();
          const blob = await canvas.convertToBlob(),
            pngUrl = URL.createObjectURL(blob);

          return pngUrl;
        },

The downloaded image has few unknown green lines at the background, what are these?

And how can these be removed?

This element appears fine in the application without these unknown lines.