How to use textarea and change input size on node in react-flow?

I want to use a textarea instead of input and change the input size using a default drag icon on the bottom right(like photo below) on a node in react-flow app, so I changed the input tag to textarea.

In this case, I can see the drag icon of textarea, but I can't use it and then node moves.

How can I change the input size in textarea on node?

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;

Other files are based on reactflow official github https://github.com/xyflow/react-flow-mindmap-app/tree/main

node: 20.10.0

react: 18.2.0

reactflow: 11.10.1

You can disable node drag by adding nodrag nopan class to your textarea tag it should enable default drag resize function