Issue with trying to focus textarea on doubleClick

(i'm using wails golang framework that uses native webview) I want my textarea to focus on double click for that i have the component below

[Ignore the setIsEditing its just for css]

-> The textarea is readOnly by default.

Expected behaviour: on double click, the readOnly state will be set to false and then the textarea should foucs

Current behaviour: the readOnly state is set to false and the textarea is editable BUT the textarea.current?.focus() fails/doesn't work

System: linux mint

export function EditableText({
  title,
  className,
  outlineOnDoubleClick = false,
  outlineOnClick = true,
}: EditableInputProps) {
  const [inputVal, setInputVal] = useState(title);
  const [isEditing, setIsEditing] = useState(false);
  const [readOnly, setReadOnly] = useState(true);
  const textAreaRef = useRef<null | any>(null);

  const baseClass = `resize-none select-none`;
  const outlineDblClass = `${!isEditing && outlineOnDoubleClick ? "outline-none" : ""}`;
  const outlineSingleClass = `${outlineOnClick ? "" : !outlineOnDoubleClick && "outline-none"}`;
  const finalClass = cn(
    baseClass,
    outlineSingleClass,
    outlineDblClass,
    className,
  );

  return (
    <textarea
      ref={textAreaRef}
      value={inputVal}
      onChange={(e) => setInputVal(e.target.value)}
      className={finalClass}
      readOnly={readOnly}
      onDoubleClick={() => {
        setIsEditing(true);
        setReadOnly(false);
        textAreaRef.current?.focus();
      }}
      onBlur={() => {
        setIsEditing(false);
        setReadOnly(true);
      }}
    />
  );
}

Update i just went with .select() since it worked and using focus seems to be inconsistent accross browsers.

Here's how my return component looks like now:

    return (
      <ReactTextareaAutosize
        ref={textAreaRef}
        value={title}
        onChange={onChange}
        className={finalClass}
        readOnly={!isEditing}
        onDoubleClick={() => {
          setIsEditing(true);
          window.addEventListener("keydown", handleKeyDown);
          window.addEventListener("keyup", handleKeyUp);
          textAreaRef.current.select();
        }}
        onBlur={() => {
          setIsEditing(false);
        }}
      />
    );