Scene added on top of another ends up "below" in Phaser 3

I have a Scene in which I call my UI, and display a sprite.

MainGame.js

export default class MainGame extends Phaser.Scene
{
    constructor ()
    {
        super('MainGame');
        this.sprite;
    }
    create {   
        this.scene.launch('UI');
        this.sprite = this.add.sprite(0, 45, 'mysprite');
        this.sprite.anims.play({key: 'idle'}, true);   
    }
}

In my UI.js I have:

export default class UI extends Phaser.Scene
{
    constructor ()
    {
        super({key: 'UI'});
    }

    init ()
    {
        this.scene.moveUp();
    }

    create ()
    {
        //
    }
}

Yet my UI (health bar etc..) is below anything I put on the Scene of MainGame.js

Edit:

Winner_joiner pointed me in the right direction: I had another Scene in my main.js like so :

scene: [ Preloader, UI, Intro, MainGame ]

The proper way to do it is indeed to specify how Scenes should be placed instead of kinda guessing.

Depending on your code a fast solution could be, simply calling the function moveAbove in the UI Scene (link to the documenation)

...
init(){
    this.scene.moveAbove( 'MainGame', 'UI' );
}
...

But actually your described code, should also work. Except the moveUp function call, here a parameter is missing.(link to the documentation)