Why is the data in a Context not updating/completing/getting passed down - react-native

Question

I use the following code to fetch the data for my app.
export const DataContext = () => {
const [posts, setPosts] = useState<Array<Post>>([]);
const [profiles, setProfiles] = useState<Array<User>>([]);
const [page, setPage] = useState<number>(1);
const [perPage, setPerPage] = useState<number>(10);
useEffect(() => {
async function fetchData() {
const { data: postsData } = await supabase
.from("posts")
.select("*")
.range((page - 1) * perPage, page * perPage - 1);
setPosts(postsData!.map((post) => new Post(post)));
const postUids = postsData!.map((post) => post.uid);
const { data: profilesData } = await supabase
.from("profiles")
.select("*")
.in("uid", postUids);
const profiles = profilesData!.map((userData: any) => {
const userPosts = posts.filter((post) => post.uid === userData.uid);
const user = new User({ ...userData, posts: userPosts });
return user;
});
setProfiles((prevUsers) => [...prevUsers, ...profiles]);
}
fetchData();
}, [page, perPage]);
const nextPage = () => {
setPage(page + 1);
};
const prevPage = () => {
setPage(page - 1);
};
return React.createContext({ posts, profiles, nextPage, prevPage });
};
Then, in a TabBarView I use that context to share the data between two screens.
const { posts, profiles } = useContext(DataContext());
const Home = (props: any) => (
<View style={Theme().screen}>
<HomeScreen posts={posts} users={users} />
</View>
);
const Discover = (props: any) => (
<View style={Theme().screen}>
<ExploreScreen posts={posts} users={profiles} />
</View>
);
My first issue was that the posts array in each user was always empty in the context. I fixed this temporarily by repeating the logic to add those posts in the TabBarView.
const { posts, profiles } = useContext(DataContext());
const users: Array<User> = profiles.map((user) => { ///Added
const userPosts = posts.filter((post) => post.uid === user.uid); ///Added
user.posts.push(...userPosts); ///Added
return user; ///Added
}); ///Added
const Home = (props: any) => (
<View style={Theme().screen}>
<HomeScreen posts={posts} users={users} />
</View>
);
const Discover = (props: any) => (
<View style={Theme().screen}>
<ExploreScreen posts={posts} users={profiles} />
</View>
);
Even though that data is now logging what I would expect, the data going to HomeScreen and DiscoverScreen through props is different. The posts is fine but users is just logging as [] which means the users are not added there. Why is this happening and how can I fix this?
Example data from DataContext:
Posts: [{
"caption":"Caption",
"date":"1669244422569",
"imageUrls":[
"https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__480.jpg"
],
"location":{
"latitude":150,
"locationInfo":"City, State",
"longitude":-150
},
"postId":"1669244407166",
"uid":"daf6b8be-7cd0-4341-89d7-07879b207087"
}]
Users: [{
"blockedUsers":[],
"displayName":"name",
"photoURL":"https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__480.jpg",
"uid":"daf6b8be-7cd0-4341-89d7-07879b207087",
"verified":false
}]
Example log from TabBarView:
Posts: [Post, Post, Post]
Users: [User, User, User]
What would log in HomeScreen:
Posts: [Post, Post, Post]
Users: []