React Native - Data is not loaded in the screen but if reload the page I am able to see the data - react-native

Question

I am new to React Native.
I am storing the some data like GUID, userID, company name , in AsyncStorage when user login to the apps for the first time. I want to load the department details in department page based on selected company name which tag to unique GUID.
I am able to get the data from the AsyncStorage. Now I need to pass the GUID to "setDepartment(GUID)" store then pass to fetch API to get the data from server.
Problem : The data not able to load open when I open the department page but if I refresh the page , I am able to see the data in the screen. I am not sure where I make the mistakes. I think it something do with useEffect and useCallback. Please Guide Me. Thank You.
const DepartmentScreen = (props) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);
const departments = useSelector((state) => state.departments.allDepartment);
const dispatch = useDispatch();
const [GUID, setGUID] = useState("");
const getData = useCallback(async () => {
try {
AsyncStorage.getItem("companyData").then((companyData) => {
let parsed = JSON.parse(companyData);
setGUID(parsed.GUID);
console.log(GUID);
});
} catch (error) {
console.log(error);
}
}, []);
useEffect(() => {
getData();
}, [dispatch, getData]);
const loadDepartment = useCallback(async () => {
setError(null);
setIsLoading(true);
try {
//getData();
await dispatch(departmentAction.setDepartment(GUID));
} catch (err) {
setError(err.message);
}
setIsLoading(false);
}, [dispatch, setIsLoading, setError]);
useEffect(() => {
loadDepartment();
}, [dispatch, loadDepartment]);
if (error) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>
AN ERROR OCCURRED {error} + {GUID}
</Text>
<Button title="Reload" onPress={loadDepartment} />
</View>
);
}
if (isLoading) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<ActivityIndicator size="large" />
</View>
);
}
if (!isLoading && departments.length === 0) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>NO DEPARTMENT FOUND</Text>
</View>
);
}
return (
<View style={{ flex: 1 }}>
<View style={styles.ButtonView}>
<View>
<Button title="Listed" />
</View>
<View>
<Button title="De-Listed" />
</View>
</View>
<FlatList
data={departments}
renderItem={(itemData) => (
<DepartmentItem
name={itemData.item.deptName}
code={itemData.item.deptCode}
/>
)}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
};