JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/konva@10/konva.js"></script>
<div id="container"></div>
<div id="control-panel">
    <h3 id="room-name">Click on a room.</h3>
    <button onclick="changeStatus('Fire')">Fire</button>
    <button onclick="changeStatus('Clear')">Clear</button>
</div>

JavaScript

const siteSVG = String.raw`<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <path title="Triangle 1" fill="orange"
    d="M 50, 10
       L 70, 10
       l 0, 10
       Z" />
  <path title="Triangle 2" fill="blue"
    d="m 80, 10
       l 30, 30
       l 10, -40
       Z"/>
  <path tite="Triangle 3" fill="green"
    d="m 0, 70
       h 50
       v 50
       z" />
  <path title="Shape 1" fill="magenta"
    d="M 26.98, 7.64
       C 29.5, 9.34, 32.24, 10.34 ,32.98, 12.28
       C 33.7, 14.22, 32.38, 17.12, 32.64, 20.14
       C 32.9, 23.18, 34.72, 26.36, 33.68, 27.78
       C 32.66, 29.18, 28.76, 28.8, 26, 29.18
       C 23.24, 29.58, 21.62, 30.74, 19.68, 31.3
       C 17.72, 31.86, 15.46, 31.84, 14.18, 30.6
       C 12.9, 29.34, 12.62, 26.88, 12.18, 24.92
       C 11.76, 22.94, 11.18, 21.48, 11.18, 20
       C 11.18, 18.52, 11.76, 17.06, 11.88, 14.56
       C 12.02, 12.06, 11.7, 8.56, 12.96, 6.16
       C 14.24, 3.74, 17.12, 2.44, 19.68, 3
       C 22.24, 3.54, 24.48, 5.94, 26.98, 7.64
       Z" />
  <path title="Shape 2" fill="purple"
    d="M 40, 30
       c -60,50 30,50 20,10
       c 10,-10 -20,0
       Z" />
  <path title="Shape 3" fill="cyan"
    d="M 100 40
       C 10 70, 85 70, 95 80
       S 100 110, 120 70
       Z" />
</svg>`;

const stage = new Konva.Stage({
  container: 'container',
  width: 462,
  height: 494,
});

const layer = new Konva.Layer();
stage.add(layer);

/**
const imageObj = new Image();
imageObj.src = baseImage;
imageObj.onload = function () {
  const kImg = new Konva.Image({
    x: 0,
    y: 0,
    image: imageObj,
    width: 1462,
    height: 894,
  });
  layer.add(kImg);
  kImg.moveToBottom();
};
/**/

function loadSectors() {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(siteSVG, 'image/svg+xml');
  const paths = svgDoc.querySelectorAll('path');

  Array.from(paths).forEach((p) => {
    const room = new...