How to get the parent group data when clicking on a panel?

I have the following layout in my graph:

When clicking on a part inside of that group I want to retrieve the data defined on group 1 (see above image)
But instead, what I am getting is the data for group 2, the “root group”.

This is the code I am using for the groups template map.
Group 2 uses a different template map.

   $(
      go.Group,
      'Auto',
      {
        layout: $(go.GridLayout, {
          wrappingColumn: 6,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(1, 1),
          spacing: new go.Size(3, 3),
        }),
        selectable: false,
        movable: false,
      },

      $(
        go.Shape,
        {
          strokeWidth: 1,
          stroke: 'lightblue',
        },
      ),
      $(go.Placeholder, {
        padding: 5,
      }),

      $(
        go.Panel,
        'Auto', // the Shape will go around the TextBlock
        {
          alignment: go.Spot.TopLeft,
          position: new go.Point(0, -20),
          click(e, obj) {
            const group = obj.part.containingGroup // This seems to return the data for the root group and not this sub group (group 2 in ilustration)
            console.log('group',group.data)
          },
        },
        $(go.Shape, { strokeWidth: 0, fill: 'transparent' }),
        $(
          go.TextBlock, // group title
          {
            font: 'bold 14px Barlow, sans-serif',
            background: 'transparent',
            stroke: 'lighblue',
            margin: new go.Margin(4, 7),
            text: 'click me'
          },
        )
      ),
)

Your click event handler is on a GraphObject that is in the visual tree of the Group. So the GraphObject.part will be that Group. This is what you want.

Getting the Part.containingGroup will get the Group that the Part is a member of, if any. If it is a top-level Part, the containingGroup property will be null.