react-flow更改节点名称

import ReactFlow, { Controls, useStoreState } from 'react-flow-renderer';

const MyFlow = () => {
  const [nodes, setNodes] = useState([
    { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
    { id: '2', data: { label: 'Node 2' }, position: { x: 200, y: 200 } },
  ]);

  const onNodeNameChange = (nodeId, newName) => {
    const updatedNodes = nodes.map(node => {
      if (node.id === nodeId) {
        return { ...node, data: { ...node.data, label: newName } };
      }
      return node;
    });
    setNodes(updatedNodes);
  };

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow elements={nodes} onNodeDragStop={onNodeDragStop}>
        <Controls />
      </ReactFlow>
    </div>
  );
};

const MyFlow = () => {
  // ...

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow elements={nodes} onNodeDragStop={onNodeDragStop}>
        <Controls />
        {nodes.map(node => (
          <CustomNode
            key={node.id}
            id={node.id}
            label={node.data.label}
            onNameChange={onNodeNameChange}
          />
        ))}
      </ReactFlow>
    </div>
  );
};

const CustomNode = ({ id, label, onNameChange }) => {
  const [nodeName, setNodeName] = useState(label);

  const handleNameChange = e => {
    const newName = e.target.value;
    setNodeName(newName);
    onNameChange(id, newName);
  };

  return (
    <div>
      <input type="text" value={nodeName} onChange={handleNameChange} />
    </div>
  );
};