import { createApplication, drawCircle } from "../pixi/Application";
const app = createApplication();

import { Application } from "../pixi/Application";
const application = new Application();

    container.current?.appendChild(app.view);

    container.current?.appendChild(application.app.view);

      <button onClick={() => drawCircle()}>text</button>

      <button onClick={() => application.drawCircle()}>text</button>

var app: Pixi.Application;
export function createApplication() {
  app = new Pixi.Application({
    antialias: true,
    backgroundColor: 0xffffff,
  });
  return app;
}

export class Application {
  public app!: Pixi.Application;

export function drawCircle() {
  const graphics = new Pixi.Graphics();
  graphics.lineStyle(2, 0xfeeb77, 1);
  graphics.beginFill(0x650a5a, 1);
  graphics.drawCircle(250, 250, 50);
  graphics.endFill();
  app.stage.addChild(graphics);
}

  constructor() {
    this.app = new Pixi.Application({
      antialias: true,
      backgroundColor: 0xffffff,
    });
  }
  public drawCircle() {
    const graphics = new Pixi.Graphics();
    graphics.lineStyle(2, 0xfeeb77, 1);
    graphics.beginFill(0x650a5a, 1);
    graphics.drawCircle(250, 250, 50);
    graphics.endFill();
    this.app.stage.addChild(graphics);
  }
}