Focus handling in ControlledEnvironment

[eascan]

Hello! I am using the ControlledEnvironment tree and am completely stumped when it comes to focus handling. I've dug around in the data structures/functions that are exposed through the refs, but can't figure this out. I am trying to manage the focused item to apply state to it when the item is focused and remove state when not. I am the focusedItem state with a useClickOutside hook. Although the focusedItem state gets nullified when user clicks outside, the library just makes the first item in the tree structure focused even when focusedItem is undefined. I can't seem to find a solution to this. Would anyone have any suggestions for me? Greatly appreciate any help!

  const [focusedItem, setFocusedItem] = useState();

  const tree = useRef(null);
  const treeRef = useRef(null);

useClickOutside(treeRef, () => {
    setFocusedItem(undefined);
  });
<ControlledTreeEnvironment
          ref={treeRef}
          items={treeData?.items}
          getItemTitle={(item) => item.data.name}
          viewState={{
            ['file-tree']: {
              focusedItem,
              expandedItems,
              selectedItems,
            },
          }}
          onFocusItem={(item) => {
            setFocusedItem(item);
          }}
          onExpandItem={...
          }
          onCollapseItem={...
          }
          onSelectItems={(items) => setSelectedItems(items)}
          renderItem={({ item, title, arrow, depth, context, children }) => {
            return (
              <li {...context.itemContainerWithChildrenProps}>
                <div
                  {...context.itemContainerWithoutChildrenProps}
                  {...context.interactiveElementProps}
                  className={cn(
                    'flex items-center justify-start p-1 pl-2 gap-1 bg-none text-md text-gray-300 hover:text-white hover:bg-lighter-background-hover cursor-pointer',
                    context.isFocused
                      ? 'outline outline-1 outline-offset-[-1px] outline-gray-500 bg-lighter-background-hover text-active-text hover:text-active-text'
                      : context.isSelected
                        ? 'bg-lighter-background-hover text-active-text hover:text-active-text'
                        : ''
                  )}
                >
                  <span>{item.data.name}</span>
                </div>
                {context.isExpanded && children}
              </li>
            );
          }}
          renderItemTitle={renderItemTitle}
          renderItemArrow={renderItemArrow}
        >
          <Tree
            ref={tree}
            treeId='file-tree'
            rootItem='root'
            treeLabel='File System'
          />
        </ControlledTreeEnvironment>

[eascan]

Would appreciate help with this. For more context, it seems internally the library focuses the first child of the "root" whenever focusedItem is null (when using focusedItem inside the view state). autoFocus=false does not seem to work.
Experimenting with something like this does not "sync" focusedItem state with the internal state on mount:

 useEffect(() => {
    if (selectedItems.length > 0) {
      setFocusedItem(selectedItems[0]);
    } else {
      const firstItem = treeData.items['root'].children[1];
      setFocusedItem(() => {
        return firstItem;
      });

      // Ensure the first item is focused in the tree
      if (treeRef.current) {
        treeRef.current.focusItem(firstItem, 'file-tree', true);
      }
    }
  }, []); 

I have clicking outside to de-focus implemented like so:

  useClickOutside(treeContainerRef, (event) => {
  if (!treeContainerRef.current) return;

  const clickedElement = event.target;

  if (isUserClickWithinSafeZoneToNotClearFocus(clickedElement)) {
    return;
  }

  setFocusedItem(null);
});

If I click outside, to de-focus, internally the first item gets focused again. If I click on the first item, it does not trigger the onFocusItem={(item) => setFocusedItem(item.index)} function, so the focusedItem state remains null until I click on any other item and back on the first item. Is there any way to disable the internal focusing and only let the view state control it? Or some other way to sync internal and external states?