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 githubhttps://github.com/xyflow/react-flow-mindmap-app/tree/main

node: 20.10.0

react: 18.2.0

reactflow: 11.10.1