How to add border radius to images in a composite image using sharp.js in Node.js?

I am using the sharp library in my Node.js project to composite a grid of images into a single image.
I have successfully created the composite image, but I need to apply a border radius to each of the images in the grid.

my code:

const sharp = require('sharp');
const axios = require('axios');
const fs = require('fs');
//dummy image lists, the real data will be fetched by api 
const imageUrls = Array(25).fill("").map((el, i)=> `https://picsum.photos/id/${i}/1280/720`)
//basic setting
const productWidth = 1080
const productHeight = 1080
const row = 5
const col = 5
const gapSize = 10;
//length - padding * 2 - gap * row
const imageWidth = (productWidth - gapSize * (row - 1) - gapSize * 2) / row;
const imageHeight = (productHeight - gapSize * (col - 1) - gapSize * 2) / col;
const borderRadius = 20;
//for border radius
const mask = Buffer.from(
`<svg><rect x="0" y="0" width="${imageWidth}" height="${imageHeight}" rx="${borderRadius}" ry="${borderRadius}" /></svg>`
);
const imagePromises = imageUrls.map(async (url) => {
const response = await axios.get(url, { responseType: 'arraybuffer' });
const image = sharp(response.data);
if (image) console.log('downloaded image')
return image.resize(imageWidth, imageHeight, { fit: 'cover' }).composite([{
input: mask,
blend: 'dest-in'
}]).toBuffer();
});
async function compositeImages() {
try {
const images = await Promise.all(imagePromises)
//init canvas
const canvas = sharp({
create: {
width: productWidth,
height: productHeight,
channels: 4, // RGBA
background: { r: 255, g: 255, b: 255, alpha: 1 } // white background
}
});
//draw images
const compositeArr = images.map((buffer, index) => {
const colValue = index % col
const rowValue = Math.floor(index / col)
const x = gapSize + colValue * (imageWidth + gapSize)
const y = gapSize + rowValue * (imageHeight + gapSize)
return {
input: buffer,
left: x,
top: y,
blend: 'atop'
}
})
//download final product
canvas.composite(compositeArr)
.png()
.toBuffer()
.then((buffer: any) => {
fs.writeFileSync('banner.png', buffer);
});
} catch (error) {
console.log(error)
}
}
compositeImages()

The final product:

The black color edge is still here. How to remove?

I would appreciate any suggestions or insights on how to resolve this issue. Thank you in advance.

Try converting the image to PNG before compositing.

return image.resize(imageWidth, imageHeight, { fit: 'cover' }).png().composite([{
    input: mask,
    blend: 'dest-in'
  }]).toBuffer();

I hope this helps.