Custom controls in fabric.js has a small clickable area

i am trying to create a custom controls in fabric.js but when i make the icon bigger the clickable area stays the same.

<canvas id="canvas"></canvas>

const canvas = new fabric.Canvas('canvas', {
  backgroundColor: "orange"
})

const textInstance = new fabric.IText('Write', {
  fontSize: 20,
  fill: "white"
});
canvas.centerObject(textInstance);

canvas.add(textInstance);
canvas.setActiveObject(textInstance);

const deleteIcon = "https://cdn-icons-png.flaticon.com/512/3687/3687412.png";
const deleteImg = document.createElement('img');
deleteImg.src = deleteIcon;

fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetX: 30,
    offsetY: -30,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon(deleteImg),
    cornerSize: 50
})

function renderIcon(icon) {
    return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
        const size = this.cornerSize;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(icon, -size/2, -size/2, size, size);
        ctx.restore();
    }
}

function deleteObject(e, transform){
    console.log('delete object');
}

I tried changing the icon size, increasing the cornerSize but nothing helped. I made the icon bigger in the renderIcon function, but the clickable area remained the same, just like when I increased the cornerSize.

You can use sizeX and sizeY.

new fabric.Control({ sizeX: 28, sizeY: 28 });

Reference