如何在antd树表上拖放？

import React, { useState } from 'react';
import { Tree, Table } from 'antd';
import { Draggable } from 'react-beautiful-dnd';

const data = [
  {
    key: '1',
    name: 'Node 1',
    children: [
      {
        key: '2',
        name: 'Node 1-1',
      },
      {
        key: '3',
        name: 'Node 1-2',
      },
    ],
  },
  {
    key: '4',
    name: 'Node 2',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
];

const TreeTable = () => {
  const [treeData, setTreeData] = useState(data);

  const handleDragStart = (info) => {
    const { node } = info;
    // 保存被拖拽节点的信息
    // 可以根据需求保存其他相关信息
    localStorage.setItem('dragNode', JSON.stringify(node));
  };

  const handleDragEnd = (info) => {
    const { node } = info;
    const dragNode = JSON.parse(localStorage.getItem('dragNode'));
    // 获取目标节点的信息
    const targetNode = node;

    // 在树表数据中移动被拖拽节点到目标节点位置
    const updatedTreeData = [...treeData];
    // 根据需求更新树表数据
    // ...

    // 更新树表数据，重新渲染组件
    setTreeData(updatedTreeData);
  };

  const renderTreeNode = (node) => (
    <Draggable key={node.key} draggableId={node.key}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          {node.name}
        </div>
      )}
    </Draggable>
  );

  return (
    <div>
      <Tree
        draggable
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        treeData={treeData}
        renderTreeNode={renderTreeNode}
      />
      <Table columns={columns} dataSource={treeData} />
    </div>
  );
};

export default TreeTable;