Optimizing pixi viewport layout

I am using pixi.js to create an interactive grid. This grid is composed of PIXI Graphics rectangles. I am now creating a layout of 25000 rectangles and the browser is having a hard time to process it (code sandbox below)

This is my setup :

setup() {
                // making a 30 x 13 grid of tiles
                for (let i = 0; i < 25000; i++) {
                    let square = new PIXI.Graphics();
                    square.beginFill(0xF2F2F2);
                    square.drawRect(0, 0, 25, 25);
                    square.endFill();
                    // Opt-in to interactivity
                    square.interactive = true;
                    square.buttonMode = true;

                    square.on('pointerdown', this.onButtonDown);
                    // square.on('pointerover', this.onButtonOver);
                    // square.on('mouseout', this.onButtonOut);

                    square.x = (i % 30) * 32;
                    square.y = Math.floor(i / 30) * 32;
                    // add squares to stage
                    this.viewport.addChild(square);
                }
            }

Is there a way to optimize this or have I maxed out Canvas capacities ?

https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue