im using prime react table to render dynamic data in react. i build my component with the help of the datatable docs: https://primereact.org/datatable/
when i click the add row button,i would like that the new added row to be instantly editable to the user,(preferbly with keyboard focus that ill add later ) without him using the edit button to edit the empty new row,
is that possible? havent found a solution yet, any help is appreciated, thanks!

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { data2 } from "../data2";
import { useState } from "react";
import { InputText } from "primereact/inputtext";

export const Table = () => {
  const [guestList, setGuestList] = useState(data2);

  const handleAddRow = (): void => {
    const newGuest: any = {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      freeTextField: "",
    };
    setGuestList((prevGuestList: any) => [newGuest, ...prevGuestList]);
  };

  const onRowEditComplete = (e: any) => {
    const _guests = [...guestList];
    const { newData, index } = e;

    _guests[index] = newData;

    setGuestList(_guests);
  };

  const textEditor = (options: any) => {
    return (
      <InputText
        type="text"
        value={options.value}
        onChange={(e) => options.editorCallback(e.target.value)}
      />
    );
  };

  return (
    <div className="table-wrapper">
      <h2 className="table-name">PrimeReact data table</h2>
      <button onClick={handleAddRow}>add row</button>

      <DataTable
        value={guestList}
        tableStyle={{ minWidth: "50rem" }}
        editMode="row"
        onRowEditComplete={onRowEditComplete}
      >
        <Column
          field="firstName"
          header="firstName"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="lastName"
          header="lastName"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="email"
          header="email"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="phone"
          header="phone"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column style={{ maxWidth: "15%" }} rowEditor>
          edit
        </Column>
      </DataTable>
    </div>
  );
};