Preventing Overlapping of Nodes in React Flow When Nodes are Dragged and Resized

Question

I need to prevent nodes from overlapping when their size changes. Is there any way to automatically update the positions of the nodes when their size changes so that they don't overlap with each other? I'd like the nodes to move away from each other when their size increases, and move closer to each other when their size decreases.

This is my component

import { useCallback, useState } from "react";
import ReactFlow, {
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
} from "reactflow";
import "reactflow/dist/style.css";
import CutomNode from "./CutomNode.jsx";
import { TableTemplate } from "../Table/TableTemplate.js";

const rfStyle = {
  backgroundColor: "#B8CEFF",
};

const initialNodes = [
  {
    id: "node-1",
    type: "textUpdater",
    position: { x: -100, y: 0 },
    data: new TableTemplate(0, "My emplyee", 3),
  },
  {
    id: "node-2",
    type: "textUpdater",
    position: { x: 10, y: 300 },
    data: new TableTemplate(1, "My academi", 2),
  },
  {
    id: "node-3",
    type: "textUpdater",
    position: { x: 300, y: 20 },
    data: new TableTemplate(2, "My salary", 1),
  },
];
// we define the nodeTypes outside of the component to prevent re-renderings
const nodeTypes = { textUpdater: CutomNode };

function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState([]);

  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes]
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges]
  );
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges]
  );

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      nodeTypes={nodeTypes}
      snapToGrid={true}
      snapGrid={[500, 200]}
      fitView
      style={rfStyle}
    />
  );
}

export default Flow;

This is CustomNode component

import Table from "../Table/Table";

export default function CutomNode({ data, isConnectable }) {
  return <Table data={data} />; //this component is indivital node
}