如何将单选按钮添加到react-sortable-tree？

npm install react-sortable-tree react-dom

import React from 'react';

const CheckboxNode = ({ node, path, treeIndex, onCheck }) => {
  const handleCheck = () => {
    // 在这里处理选择状态的更改
    // 您可以使用onCheck回调将更改发送回父组件
    onCheck(node, path, treeIndex);
  };

  return (
    <div>
      <input type="checkbox" checked={node.checked} onChange={handleCheck} />
      {node.name}
    </div>
  );
};

export default CheckboxNode;

import React from 'react';
import SortableTree, { changeNodeAtPath } from 'react-sortable-tree';
import CheckboxNode from './CheckboxNode';

const App = () => {
  const [treeData, setTreeData] = React.useState([
    {
      name: 'Node 1',
      checked: false,
      children: [
        { name: 'Child 1', checked: false },
        { name: 'Child 2', checked: false },
      ],
    },
    {
      name: 'Node 2',
      checked: false,
      children: [
        { name: 'Child 3', checked: false },
        { name: 'Child 4', checked: false },
      ],
    },
  ]);

  const handleCheck = (node, path, treeIndex) => {
    // 更新节点的选择状态
    const updatedTreeData = changeNodeAtPath({
      treeData,
      path,
      getNodeKey: ({ treeIndex }) => treeIndex,
      newNode: { ...node, checked: !node.checked },
    });

    setTreeData(updatedTreeData);
  };

  return (
    <div style={{ height: 400 }}>
      <SortableTree
        treeData={treeData}
        onChange={setTreeData}
        generateNodeProps={({ node, path, treeIndex }) => ({
          buttons: [<CheckboxNode node={node} path={path} treeIndex={treeIndex} onCheck={handleCheck} />],
        })}
      />
    </div>
  );
};

export default App;