PixiJS slow than canvas in rendering more than 20k rectangles

I am building a visualization library where I have to render more than 20k rectangles with different color and sizes. I am using a single graphics object to render all the rectangles. The canvas implementation takes only 3ms to render while the pixijs implementation takes more than 30-40ms to render. Is there any better way to draw primitives using pixi other than graphics?

Here is the pixijs code:

Quote

function createRectsUsingPixi (container, width, height, points) {
    const app = new PIXI.Application({ antialias: true, width, height });
    container.appendChild(app.view);

    const rect = new PIXI.Graphics();

    rect.beginFill(0x626262);

    for (let i = 0; i < points.length; i++) {
        const { x, y, width, height } = points[i];
        rect.drawRect(x, y, width, height));
    }


    rect.endFill();
    app.stage.addChild(rect);
}

And here is the canvas code:-

function createRectsUsingCanvas (container, width, height, points) {
    var canvas = document.createElement('canvas');
    var ctx = c.getContext("2d");
    container.appendChild(canvas);

    c.width = width;
    c.height = height;

    ctx.beginPath();

    points.forEach((point, i) => {
        const {x, y, width, height} = point;
        ctx.rect(x, y, width, height);
    }); 
    
    ctx.stroke();
}