Flatlist is not reading "data" variable set using hooks in react native - react-native

Question

I'm using hooks in react native project and setting data variable with referenced firebase database, when I'm console logging this data variable, It is showing null at first and within few seconds it shows fetched data, but flatlist is not reading it. Please correct my mistake. Here is my code:
RecommenTab = () => {
useFirebaseQuery = ref => {
const [docState, setDocState] = useState({
isLoading: true,
data: null
});
useEffect(() => {
return ref.on("value", snapshot => {
setDocState({
isLoading: false,
data: snapshot
});
});
}, []);
return docState;
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};
userList = () => {
const ref = database.ref("users");
const { isLoading, data } = this.useFirebaseQuery(ref);
if (data != []) {
return (
<SafeAreaView style={{ marginTop: 20 }}>
{console.log(data)}
<Text>SHOW</Text>
<FlatList
data={data}
renderItem={({ item }) => (
<View>
<Text>Work</Text>
<ListItem
title={item.name}
subtitle={item.username}
leftAvatar={{
rounded: true,
source: { uri: item.avatar }
}}
/>
</View>
)}
keyExtractor={item => item.id}
ItemSeparatorComponent={this.renderSeparator}
/>
</SafeAreaView>
);
}
};
return <View>{this.userList()}</View>;
};