JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-layers.min.js"></script>
<div id="display">
  </div>

JavaScript

let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight, 
  antialias: false,
  resolution: window.devicePixelRatio, 
  autoResize: true
});

let display = document.querySelector('#display')
display.appendChild(app.view);


let map = new PIXI.Container();

const lighting = new PIXI.display.Layer();
lighting.on('display', (element) => {
  element.blendMode = PIXI.BLEND_MODES.ADD;
});
lighting.useRenderTexture = true;
lighting.clearColor = [0.5, 0.5, 0.5, 1]; // ambient gray

map.addChild(lighting);

const lightingSprite = new PIXI.Sprite(lighting.getRenderTexture());
lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

map.addChild(lightingSprite);

for (let i = 0; i < 20; i ++){
  for (let j = 0; j < 20; j ++){
    let floor = new PIXI.Container();
    floor.setParent(map);

    let spr = new PIXI.Graphics()
    spr.beginFill(0x008800, 1)
    spr.drawRect(i, j, i*32, j*32)
    spr.endFill()
    floor.addChild(spr)
  }
}

for (let i = 0; i < 2; i ++){
  let unit = new PIXI.Container();
  unit.setParent(map);

  unit.x = 100 + i*50;
  unit.y = 100;

  let spr = new PIXI.Graphics()
  spr.beginFill(0x0000FF, 1)
  spr.drawCircle(0, 0, 10)
  spr.endFill()

  const lightbulb = new PIXI.Graphics();
  lightbulb.beginFill(0x000000, 1.0);
  lightbulb.drawCircle(0, 0, 50);
  lightbulb.endFill();
  lightbulb.parentLayer = lighting;// <-- try comment it

  unit.addChild(lightbulb);
  unit.addChild(spr);
}

app.stage.addChild(map)