I want to group elements and when these elements are dragged over the rectangle(group) element, they move with each other How to implement such a feature? Is there a way to know whether an element is on top of that element and append it to it as a child or any other solution

const elements = [
  { // this is the rectangle which I want to append elements to it
    id: '1',
    type: 'group',
    data: {
      label: 'node 1',
    },
    position: { x: 250, y: 0 },
  },
  {
    id: '2',
    type: 'ec2',
    data: {
      label: 'node 2',
    },
    position: { x: 100, y: 100 },
  },
  {
    id: '3',
    type: 's3',
    data: {
      label: 'node 3',
    },
    position: { x: 80, y: 120 },
  }
];

Getting positions of elements

P.S: I am using React.js & react-flow-library (If that could help)