TreeViewEditInputProps

import { TreeView, TreeViewNodes, TreeViewNode, TreeViewItemToggle, TreeViewItemLabel, TreeViewEditInput, TreeEditEvent } from '@syncfusion/react-navigations';
import { useState, KeyboardEvent } from 'react';

const dataSource = [
  { id: '1', label: 'Documents' },
  { id: '2', label: 'Resume.docx' }
];
const fields = { id: 'id', label: 'label' };

export default function App() {

  const [data, setData] = useState(dataSource);

  const onNodeEdit = (event: TreeEditEvent): boolean => {
      const next = event.newLabel.trim();
      if (!next || next === event.oldLabel) {
          return false;
      }
      setData((prev) =>
          prev.map((node) =>
              node.id === event.id ? { ...node, label: next } : node
          )
      );
      return true;
  };
  return (
      <TreeView dataSource={data} fields={fields} editable onNodeEdit={onNodeEdit}>
          <TreeViewNodes>
              {ctx => (
                  <TreeViewNode>
                      <TreeViewItemToggle />
                      {ctx.isEditing
                          ? <TreeViewEditInput>
                              {(editCtx) => (
                                  <input
                                      className='tree-input-field'
                                      value={editCtx.value}
                                      onChange={(e) => editCtx.setValue(e.target.value ?? '')}
                                      autoFocus
                                      onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                                          if (e.key === 'Enter') {
                                              e.stopPropagation();
                                              editCtx.commit();
                                          } else if (e.key === 'Escape') {
                                              e.stopPropagation();
                                              editCtx.cancel();
                                          }
                                      }}
                                      onBlur={() => editCtx.commit()}
                                  />
                              )}
                          </TreeViewEditInput>
                          : <TreeViewItemLabel>{String((ctx.item as { label: string }).label)}</TreeViewItemLabel>}
                  </TreeViewNode>
              )}
          </TreeViewNodes>
      </TreeView>
  );
}