Why Using focusSelf Inside useEffect Sets Focus to the Last Item Instead of the First — and How to Fix It

[M7moudMostafa]

Why, when using focusSelf inside useEffect, does the focus go to the last item in the list, but when using setFocus it correctly goes to the first item? And what is the solution if I need to use it with focusSelf()?

const Item = ({ item, onEnterPress }) => {
  const { ref, focused } = useFocusable({
    focusKey: item.focusKey,
    onEnterPress: () => {
      onEnterPress(item.title);
    },
  });

  useEffect(() => {
    setFocus("Main");
  }, []);

  return (
    <MenuItem ref={ref} $focused={focused}>
      {item.icon} {item.title}
    </MenuItem>
  );
};

[predikament]

@M7moudMostafa Hello! Could you please provide a working example (f.ex. a test repo) that we can use to reproduce your problem, so we can give a better response? Thanks