Dropdown UI Black Screen Issue on Android in Phaser Game

I’m encountering an issue with a custom dropdown in my Phaser 3 game. The dropdown works perfectly on iOS and web, but on Android (APK), the screen turns black when I attempt to display the dropdown list. The dropdown is created using the DOM and dynamically populated with options. Here’s how I’m adding the dropdown:

// Create a dropdown using HTML
const dropdown = document.createElement('select');
dropdown.style.position = 'absolute';
dropdown.style.zIndex = '1000';

const option1 = document.createElement('option');
option1.value = '1';
option1.text = 'Option 1';
dropdown.appendChild(option1);

const option2 = document.createElement('option');
option2.value = '2';
option2.text = 'Option 2';
dropdown.appendChild(option2);

document.body.appendChild(dropdown);
dropdown.addEventListener('change', (event) => {
  const selectedValue = (event.target as HTMLSelectElement).value;
  console.log('Selected Value:', selectedValue);
  if (selectedValue === '1') {
    console.log('Option 1 selected');
  } else if (selectedValue === '2') {
    console.log('Option 2 selected');
  }

my gameconfig looks like below

export class RobotGame extends Phaser.Game {
constructor() {
    super({
        type: Phaser.AUTO,
        scale: {
            width: Dimensions.designResolution.width,
            height: Dimensions.designResolution.height,
            mode: Phaser.Scale.NONE,
        },
        backgroundColor: "#000000",
        banner: false,
        zoom: 1,
        autoMobilePipeline: true,
        plugins: {
            global: [

            ],
            scene: [
                {
                    key: "rexGestures",
                    plugin: gestures,
                    mapping: "rexGestures",
                },
            ],
        },
        loader: {
            crossOrigin: "anonymous",
            baseURL: CDN_PATH,
        },
        parent: "DOMElementParent",
        dom: {
            createContainer: true,
        },
        render: {
            transparent: true,
            powerPreference: "high-performance",
            autoMobilePipeline: true,
        },
    });

    this.canvas.className = "game_canvas";

    SafeArea.getSafeAreaInsets().then((safeArea) => {
        this.bootGame(safeArea);
    });
}

private bootGame(safeArea: SafeAreaInsets): void {
    const ppi = window.devicePixelRatio;
    Dimensions.safeAreaInsets = {
        top: safeArea.insets.top * ppi,
        right: safeArea.insets.right * ppi,
        bottom: safeArea.insets.bottom * ppi,
        left: safeArea.insets.left * ppi,
    };

    this.scene.add("Boot", new Boot());
    this.scene.start("Boot");
}

• using Phaser: 3
• Capacitor : 6
• @capacitor/android": “^6.0.0”

screenShot of dropdown looks like below

I suspect it might be related to DOM element rendering on Android. Any ideas or suggestions on debugging or fixing this?