Reactjs 如何在react 流中使用文本区域和改变 node 的输入大小

我想使用textarea而不是input，并使用react-flow应用程序中 node 右下角的默认拖动图标(如下图所示)更改输入大小，因此我将input标记更改为textarea.

在这种情况下，我可以看到拖拽图标textarea，但我不能使用它，然后 node 移动.

如何在 node 上以textarea为单位更改输入大小？

MindMapNode.jsx

import {useLayoutEffect, useEffect, useRef} from 'react';
import {Handle, Position} from 'reactflow';

import useStore from '../store';

import DragIcon from './DragIcon';


function MindMapNode({id, data}) {
    const inputRef = useRef(null);
    const updateNodeLabel = useStore((state) => state.updateNodeLabel);

    useEffect(() => {
        setTimeout(() => {
            inputRef.current?.focus({preventScroll: true});
        }, 1);
    }, []);

    useLayoutEffect(() => {
        if (inputRef.current) {
            inputRef.current.style.width = `${data.label.length * 8}px`;
        }
    }, [data.label.length]);

    return (
        <>
            <div className="inputWrapper">
                <div className="dragHandle">
                    <DragIcon/>
                </div>
                <textarea
                    value={data.label}
                    onChange={(evt) => updateNodeLabel(id, evt.target.value)}
                    className="input"
                    ref={inputRef}
                />
            </div>

            <Handle type="target" position={Position.Top}/>
            <Handle type="source" position={Position.Top}/>
        </>
    );
}

export default MindMapNode;

其他文件基于ReactFlow官方GitHub https://github.com/xyflow/react-flow-mindmap-app/tree/main个

node :20.10.0

react :18.2.0

reactflow:11.10.1