Rectangle not visible with physics?

Phaser 3
1

I tried to use custom container class, but the rectangle was not showing.

This is the scene I used;

import { BattleCharacter } from "./battleCharacter.js";

export class TestScene extends Phaser.Scene {
    constructor() {
        super({ key: "TestScene" });
    }
    preload () {
        
    }
    create () {

        this.waitZone = this.add.rectangle(500, 100, 1000, 200, 0xcba35c);

        this.fightZone = this.add.rectangle(500, 300, 1000, 600, 0xffffff);
        this.fightZone.setAlpha(0.000001);
        this.fightZone.setInteractive();
        this.fightZone.setDepth(2);
        this.fightZone.on('pointerdown', ()=>console.log('hohoho'));

        this.battleCharacter = new BattleCharacter(this, 300, 400, 150, 250, 0x89ac46);

        console.log(this.battleCharacter);
        

        this.opponent = this.add.rectangle(1200, 400, 150, 250, 0xd84040);
        
        this.physics.add.existing(this.battleCharacter.character);
        this.physics.add.existing(this.opponent);

        this.physics.add.collider(this.opponent, this.battleCharacter.character, function (opponent, battleCharacter) {
            opponent.x = opponent.x+150;
            battleCharacter.x = battleCharacter.x-150;
        });
    }

    update(time, delta) {
        if (Number.isInteger(time) && time > 1000)
        {   if (this.opponent.x <= 700)
                this.battleCharacter.setPosition(this.battleCharacter.x+10, this.battleCharacter.y);
            this.opponent.setPosition(this.opponent.x-10, this.battleCharacter.y);
        }
    }
}

And the BattleCharacter class;

export class BattleCharacter extends Phaser.GameObjects.Container{
    constructor(scene, x, y, width, height, color, children){
        super(scene, x, y, children);
        this.setSize(width, height);
        this.add(scene.add.rectangle(0, 0, width, height, color));
        this.setDepth(1);
        this.character = this.list[0];
        console.log(this.character);
    }
}

However, when I run this code, the character of battleCharacter was not shown.

It was showing when I used just rectangle as following scene;

export class TestScene extends Phaser.Scene {
    constructor() {
        super({ key: "TestScene" });
    }
    preload () {
        
    }
    create () {

        this.waitZone = this.add.rectangle(500, 100, 1000, 200, 0xcba35c);

        this.fightZone = this.add.rectangle(500, 300, 1000, 600, 0xffffff);
        this.fightZone.setAlpha(0.000001);
        this.fightZone.setInteractive();
        this.fightZone.setDepth(2);
        this.fightZone.on('pointerdown', ()=>console.log('hohoho'));

        this.battleCharacter = this.add.rectangle(300, 400, 150, 250, 0x89ac46);

        console.log(this.battleCharacter);
        

        this.opponent = this.add.rectangle(1200, 400, 150, 250, 0xd84040);
        
        this.physics.add.existing(this.battleCharacter);
        this.physics.add.existing(this.opponent);

        this.physics.add.collider(this.opponent, this.battleCharacter, function (opponent, battleCharacter) {
            opponent.x = opponent.x+150;
            battleCharacter.x = battleCharacter.x-150;
        });
    }

    update(time, delta) {
        if (Number.isInteger(time) && time > 1000)
        {   if (this.opponent.x <= 700)
                this.battleCharacter.setPosition(this.battleCharacter.x+10, this.battleCharacter.y);
            this.opponent.setPosition(this.opponent.x-10, this.battleCharacter.y);
        }
    }
}

For the more accurate test, this is the gameConfig;

import {TestScene} from "./testScene.js";

export const gameConfig = {
    type: Phaser.AUTO,
    width: 1000,
    height: 600,
    backgroundColor: "#ee7272",
    scene: [TestScene],
    physics: {
        default: "arcade",
        arcade: {
            debug: true
        }
    }
};
2

I thought I added that scene.add.existing(this), but now I found I deleted it accidently. Sorry for bothering whoever checked this.