why does useCallback return an empty array

Question

in react native app,

i'm trying to get data from async function which will bring me back Promise<AlarmType[] | undefined>

Q1. so, in getAlarms.then() function, the undefined case is filtered and an empty array is printed in my console.

and after saving code in vscode, the console prints an array with proper data

Q2.the reason why i use useLayoutEffect and useEffect separately is i just wanna separate the data fetching code from the react navigation header setOption code but i'm not sure if it is a good practice

Is there any better ways to do this? edit: i’m using react-native-simple-alarm

  const [alarms, setAlarms] = useState<AlarmType[]>([]);

  const fetchData = useCallback(() => {
    getAlarms().then(response => {
      if (response) setAlarms(response);
      else console.log('undefined | empty array returned');
    });
  }, []);

  useLayoutEffect(() => {
    fetchData();
    const willFocusSubscription = navigation.addListener('focus', () => {
      fetchData();
    });
      console.log(alarms) // here, this function is called twice, and return empty array
    return willFocusSubscription;
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => <Icon name="trash-can-outline" size={30} 
          onPress={() => {
            deleteAllAlarms();
            fetchData();
          }}/>,
      headerTitle: 'Alarm',
      headerRight: () =><Icon name="plus" size={30} onPress={() => navigation.navigate('ModalStackView')}/>,
    });
  }, []);

in getAlarms.ts

export const getAlarms = async () => {
  try {
    return await RNGetAlarms();
  } catch (error) {
    console.log('setting call error' + error);
  }
};