const [tree, setTree] = React.useState<TreeViewDataItem[]>([]);

let newTree: TreeViewDataItem[] = [];
        let newTreeParent: TreeViewDataItem = InsertTreeItem(tree[0], newTreeItem, parentTreeItem.index);
        newTree.push(newTreeParent);
        setTree(newTree);

export const InsertTreeItem = (treeItem: TreeViewDataItem, newItem: TreeViewDataItem, parentIndex: number): TreeViewDataItem => {
    let newItems: TreeViewDataItem[] = [];
    treeItem.items.forEach((node) => {
        if (node.index == parentIndex) {
            node.items.push(newItem);
        }

        let cloneNode: TreeViewDataItem = _.cloneDeep(node);

        newItems.push(cloneNode);
        InsertTreeItem(node, newItem, parentIndex);
    });
    treeItem.items = newItems;
    return treeItem;
}

<TreeView data={tree}
                            expandIcons={true}
                            item={fetchTreeItemView}
                            onExpandChange={onExpandChange}
                            onItemClick={onTreeItemClick} />

 const fetchTreeItemView = (props) => {

        let item: TreeViewDataItem = props.item;

        return (
            <>
                {(item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
               {(!item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
            </>
        );
    };

export const TreeUnselectedAttribute = props => {
    const [visibleDialog, setVisibleDialog] = React.useState<boolean>(false);
    const MENU_ID = `cm-${props.treeItem.index}`;
    const { show } = useContextMenu({
        id: MENU_ID,
    });

    const handleClickRemove = (e: React.MouseEvent) => {
        show(e);
    }

    const handleRemoveClick = (e) => {
        props.onRemoveTreeItem(props.treeItem);
    }

    const handleClick = (e) => {
    }

    const handleClickShowAttributeSelectDialog = (e) => {
        setVisibleDialog(true);
    }

    const hideAttributeSelectDialog = () => {
        setVisibleDialog(false);
    };

    return (
        <>
            <div>
                <div onContextMenu={handleClickRemove}>
                    <span key="0" /> {props.treeItem.branchXmlNode.name}
                </div>
                <Menu id={MENU_ID} theme={theme.dark}>
                    <Item onClick={handleRemoveClick}>Remove</Item>
                    <Separator />
                    <Submenu label="Add">
                        <Item onClick={handleClickShowAttributeSelectDialog}>Attribute</Item>
                    </Submenu>
                </Menu>
                {visibleDialog ? <div>Tester</div> : <div>another tester</div>}
            </div>
        </>
    );
}

  const data = [
    {
      name: 'Furniture',
      relatedProducts: [
        { name: 'Tables & Chairs' },
        { name: 'Sofas' },
        { name: 'Occasional Furniture' },
      ],
    },
    {
      name: 'Decor',
      relatedProducts: [{ name: 'Tables & Chairs' }, { name: 'Sofas' }, { name: 'Occasional Furniture' }],
    },
  ];

import { extendDataItem, mapTree } from '@progress/kendo-react-common';
import { filterBy } from '@progress/kendo-react-data-tools';
import {
  DropDownTree,
  DropDownTreeChangeEvent,
  DropDownTreeExpandEvent,
} from '@progress/kendo-react-dropdowns';
import React from 'react';

export const processTreeData = (data, state, fields) => {
  const { selectField, expandField, dataItemKey, subItemsField } = fields;

  const { expanded, value, filter } = state;
  const filtering = Boolean(filter && filter.value);

  return mapTree(
    filtering ? filterBy(data, [filter], subItemsField) : data,
    subItemsField,
    (item) => {
      const props = {
        [expandField]: expanded.includes(item[dataItemKey]),
        [selectField]: value && item[dataItemKey] === value[dataItemKey],
      };

      return filtering ? extendDataItem(item, subItemsField, props) : { ...item, ...props };
    },
  );
};

export const expandedState = (item, dataItemKey, expanded) => {
  const nextExpanded = expanded.slice();
  const itemKey = item[dataItemKey];
  const index = expanded.indexOf(itemKey);
  index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);

  return nextExpanded;
};

const selectField = 'selected';
const expandField = 'expanded';
const dataItemKey = 'name';
const textField = 'name';
const subItemsField = 'relatedProducts';

const fields = { selectField, expandField, dataItemKey, subItemsField };

const InputWithTreeList = ({ data }: { data: Record<string, unknown>[] }) => {
  const [value, setValue] = React.useState(null);
  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);

  const onChange = (event: DropDownTreeChangeEvent) => setValue(event.value);
  const onExpandChange = React.useCallback(
    (event: DropDownTreeExpandEvent) =>
      setExpanded(expandedState(event.item, dataItemKey, expanded)),
    [expanded],
  );

  const treeData = React.useMemo(() => {
    return processTreeData(data, { expanded, value }, fields);
  }, [expanded, value]);

  return (
    <DropDownTree
      style={{ width: '300px' }}
      data={treeData}
      value={value}
      onChange={onChange}
      placeholder="Start typing..."
      textField={textField}
      dataItemKey={dataItemKey}
      selectField={selectField}
      expandField={expandField}
      onExpandChange={onExpandChange}
    />
  );
};

export default InputWithTreeList;