export const TreeItem = (props) => {
 const { title, arrow, depth, item, context, children, showCheckbox, handleTreeItemClick } = props;
 console.log('context in treeItem >>>>>>>>>>', depth, context.isSelected);
 const theme: ApexTheme = useTheme();
 const treepadding = TreeDepth[depth || 0];
 const handleItemClick = (e) => {
 console.log(
 'interactiveElementProps >>>>>>>>>',
 context
 );
 context.interactiveElementProps.onClick(e);
 showCheckbox && context.addToSelectedItems()
 };
 const handleOnCheck = () => {
 //
 }
 const currentCheckboxProps = {
 key: item.index,
 // disabled,
 handleOnCheck,
 isChecked: context.isSelected,
 // checkboxProps,
 };
 const enableCheckbox = ( 
 showCheckbox ?
 <TreeCheckbox
 {...currentCheckboxProps}
 /> 
 : null)
 return (
 <li
 style={{
 listStyleType: 'none',
 backgroundColor: theme.colors.monochrome.offWhite,
 }}
 className="rct-tree-item-li"
 {...props.context.itemContainerWithChildrenProps}
 >
 <Box
 padding="8px"
 gap="8px"
 paddingLeft={treepadding}
 {...context.itemContainerWithoutChildrenProps}
 {...context.interactiveElementProps}
 onClick={handleItemClick}
 alignItems={`${!item.hasChildren && 'center'}`}
 cursor="pointer"
 backgroundColor={
 (context.isDraggingOver || context.isSelected && (!item.hasChildren))
 ? theme.colors.primary.bg
 : 'transparent'
 }
 borderRadius={`${context.isSelected && '8px'}`}
 >
 {arrow}
 {enableCheckbox}
 <Text
 hoverProps={{ color: theme.colors.primary.default }}
 fontFamily={theme.fontFamily}
 fontWeight={700}
 fontSize={theme.fontSizes[DeviceTypes.Desktop].bSmall}
 color={theme.colors.monochrome.label}
 showEllipsis
 showEllipsisAfter={125}
 >
 {title}
 </Text>
 </Box>
 {children}
 </li>
 );
};

 <UncontrolledTreeEnvironment
 canInvokePrimaryActionOnItemContainer
 canDragAndDrop={true}
 canReorderItems={true}
 ref={environmentRef}
 showLiveDescription={false}
 onSelectItems={handleTreeItemClick}
 onDrop={handleOnDropItem}
 renderItemArrow={({ item, context }) => (
 <TreeIcon
 expandIcon={expandIcon}
 collapseIcon={collapseIcon}
 color={theme.colors.monochrome.label}
 item={item}
 context={context}
 />
 )}
 renderItem={(renderItemProps) => (
 <TreeItem
 {...renderItemProps}
 interactionRefs={interactionRefs}
 showCheckbox={showCheckbox}
 onItemClick={handleTreeItemClick}
 />
 )}
 renderDragBetweenLine={CustomRenderers.renderDragBetweenLine}
 dataProvider={
 new StaticTreeDataProvider(treeItem.items, (item, data) => {
 return {
 ...item,
 data,
 };
 })
 }
 getItemTitle={(item) => item.data}
 viewState={{
 tree1: {
 selectedItems: [...defaultSelectedItems],
 // disabledItems: [...disabledTreeItems] //we can check the context in treeItemRenderer to build the logic
 },
 }}
 >
 <Tree
 treeId={TreeResource.fTree.id}
 rootItem="root"
 treeLabel={TreeResource.fTree.label}
 ref={treeRef}
 />
 </UncontrolledTreeEnvironment>