Help with picture-elements: toggling a light group not working

Configuration
1

hey folks,
I’ve been trying to get a 3d floorplan working. I seem to be striking out.
In my case, I’d like each room to be its own touch target and the toggle action should control a light group for each room.

edited:
I’m using two different ‘layers’ for each room. One to define the toggle target, the other to define the background image (with the lights off).

However, this only works for the bottom most room. EG: kitchen works until I add dining_room and then only dining_room works.

Anyone see anything glaring?

image: local/floorplan/123-MainSt_no-lights_0012_lights-on.png
pane: true
type: picture-elements
elements:
  - type: image
    image: /local/floorplan/blue.png
    entity: light.dining_room
    tap_action: none
    hold_action: none
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'off': /local/floorplan/123-MainSt_no-lights_0003_dining_off.png
      'on': /local/floorplan/transparent_square.png
  - type: image
    entity: light.dining_room
    tap_action:
      action: toggle
    image: /local/floorplan/blue.png
    style:
     top: 47%
     left: 65%
     width: 22%
  - type: image
    image: /local/floorplan/blue.png
    entity: light.kitchen
    tap_action: none
    hold_action: none
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'off': /local/floorplan/123-MainSt_no-lights_0000_kitchen_off.png
      'on': /local/floorplan/transparent_square.png
  - type: image
    entity: light.kitchen
    tap_action:
      action: toggle
    image: /local/floorplan/blue.png
    style:
     top: 47%
     left: 38%
     width: 15%
2

Create a light group and use that instead of the group.

3

thanks - I am using a light group.