I am trying to drag a group containing a couple of elements. however, I cannot drag the group if I do not drag the elements inside it. I want to drag the group by clicking anywhere inside it.

This is the actual behavior of my code

This is the behavior I want to achieve

This is my code:

const ProductCustomizer = () => {

return (
    <Stage
          height={600}
          width={600}
          style={{ border: "3px solid black" }}
        >
          <Layer>
         <Group
          id={"group1"}
          opacity={1}
          draggable
        >
            <Image
                id={"img1"}
                x={50}
                y={50}
                width={50}
                height={50}
                opacity={1}
                rotation={1}
                image={"somelink"}
           />
           <Image
                id={"img2"}
                x={150}
                y={150}
                width={50}
                height={50}
                opacity={1}
                rotation={1}
                image={"someotherlink"}
           />
           </Group>
            <Transformer
              draggable
            />
          </Layer>
        </Stage>
)
}```

I tried to add an invisible rectangle to the group and give it the same size and coords of the group to capture any drag events but did not work. I checked for the setPointerCapture() and hitFunc props but apparently the Group component does not have them.

**BONUS:**I can select multiple elements using a selection box (like the one in the first gif) and attach them to a transformer just like in the code. I obviously cannot drag the transformer and I get the same behavior as the first gif. Please tell me if there is a solution or if I should refactor my code and use smth else entirely.