react) vis.js How to group nodes by drawing squares

Question

Currently my code allows dropping nodes into netWorkContainer.

I want to label these dropped nodes as a group by grouping them with a rectangular border. dynamically

How should I implement this?

can draw a rectangle on the canvas area using HTML5, but you cannot drag and drop nodes on the canvas.

However, can't draw a rectangular border on a div. It is not drawn.

export default function NetworkVisualization() {
  const [selectedNodeId, setSelectedNodeId] = useState(null);
  const networkRef = useRef(null);

  useEffect(() => {
    const nodes = new vis.DataSet([]);
    const edges = new vis.DataSet([]);
    const data = {
      nodes: nodes,
      edges: edges,
    };
    const dsoptions = {
      physics: { enabled: false },
      nodes: { shape: 'image' },
      manipulation: {
        enabled: false,
        addEdge: function (data, callback) {
          if (data.from == data.to) {
          } else {
            callback(data);
          }
          networkRef.current.addEdgeMode();
        },
      },
    };

    const container = document.getElementById('mynetwork');
    const network = new vis.Network(container, data, {
      ...dsoptions,
      interaction: {
        dragNodes: false,
      },
    });
    networkRef.current = network;
    network.addEdgeMode();
    const sidebar = document.getElementById('sidebar');
    sidebar.addEventListener('dragstart', function (event) {
      event.dataTransfer.setData('text/plain', event.target.innerText);
    });
    container.addEventListener('drop', function (event) {
      event.preventDefault();
      const shapeType = event.dataTransfer.getData('text/plain');
      const position = network.canvas.DOMtoCanvas({
        x: event.clientX - container.getBoundingClientRect().left,
        y: event.clientY - container.getBoundingClientRect().top,
      });
      const newNodeId = nodes.length + 1;
      const newNode = {
        id: newNodeId,
        label: shapeType,
        x: position.x,
        y: position.y,
        image:'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png',
      };
      nodes.add(newNode);
      networkRef.current.addEdgeMode();
    });
    container.addEventListener('dragover', function (event) {
      event.preventDefault();
    });
    nodes.clear();
    edges.clear();
    network.on('click', function (params) {
      const { nodes } = params;
      if (nodes.length === 1) {
        setSelectedNodeId(nodes[0]);
      } else {
        setSelectedNodeId(null);
      }
    });
  }, []);

  return (
    <>
      <Container>
        <Sidebar id="sidebar">
          <div draggable>노드 </div>
          <div>
            <strong>선택된 노드: {selectedNodeId}</strong>
          </div>
        </Sidebar>
        <NetworkContainer id="mynetwork"></NetworkContainer>
      </Container>
    </>
  );
}
const Container = styled.div`
  display: flex;
  height: 100vh;
`;

const Sidebar = styled.div`
  width: 20%;
  background-color: #f0f0f0;
  padding: 20px;
`;

const NetworkContainer = styled.div`
  flex: 1;
  height: 100%;
`;