Rendering another container messes interactivity?

[FisuWorks]

Hey!

Messing around with pixi.js trying to implement a UI layer that doesn't follow the scaling of the rest of the game, but rather its own rules. So I chose to render a second container containing the UI elements. This however makes the game container's thingies unclickable (at least 'click' events don't register). Below is an example I modified from Pixi.js Click example. Using version 4.1.0 of pixi.js for the actual project, by the way.

Why is this, and how could I work around it?

(Extra info: The game is a gambling game, main target platform is mobile web, there is no movement left or right, but a larger area of a background image may be shown on different screens or landscape mode. User interface needs to be scaled and positioned according to screen size / position for user experience reasons - buttons need to be at the low end of screen, at the left and right edges of the screen, near the user's thumbs. Scaling of the buttons may need to be different depending on if the user is playing on a tablet or a phone. Unfortunately I am not allowed to post actual game code here due to company rules, so I am just trying to figure out what's with the example I posted.)

 

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

// GAME
var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
var stage = new PIXI.Container();

sprite.anchor.set(0.5);
sprite.x = renderer.width / 2;
sprite.y = renderer.height / 2;

sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('pointerdown', onClick);

stage.addChild(sprite);

// UI
var ui = new PIXI.Container();
var button = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
button.width = 10;
button.height = 10;
button.interactive = true;
button.buttonMode = true;
button.on('click', function() {
  console.log('Clicked it.');
});
ui.addChild(button);
ui.position.set(10, 10);

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
    renderer.render(ui, null, false); // Commenting this out let's me click on the 'sprite' again.
}

function onClick () {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;
}