Too many active WebGL context even after destroyed

[birdkingz]

Hi, recently I've migrated to Pixi V6 (from v4) in a ReactJS project and I've been seeing my Google Chrome browser log saying WARNING: Too many active WebGL contexts. Oldest context will be lost.

I'm aware that every browser has a limit of how many active WebGL context can be running at a time. That's why I'll destroy the unused one when they are not needed to make sure the total active WebGL context is within the limit.

Back then when I was integrating Pixi v4, I encountered similar issue but I managed to solve it by destroying the PIXI.Application when it's not needed. Now I've updated to Pixi v6 and this warning has came back again.

This is how I create PIXI.Application

const options = {
    width: width,
    height: height,
    backgroundAlpha: transparent ? 0 : 1,
    resolution: window.devicePixelRatio,
    autoDensity: true
};
    
let app = new PIXI.Application(options);
app.stage.position.set(width * 0.5, height * 0.5);
app.renderer.plugins.interaction.autoPreventDefault = false;
app.renderer.view.style.touchAction = 'auto';

this.gameCanvas.appendChild(this.app.view);

and this is what I will do when component is going to unmount

this.gameCanvas.removeChild(app.view);

const options = {
    children: true
}

app.destroy(true, options);

Does anyone know how can I solve this problem?

UPDATE: Tested on Firefox but somehow I didn't see this warning message from the console.