Firestore - Combine documents from two different collection - React Typescript - reactjs

Question

I have created three collections because I want to be able to do filter search by tasks or users etc
My Firebase collection looks like this:
Collection 1 - (Users)
- username
- name
Collection 2 - (Tasks)
- taskname
- points
Collection 3 - (taskData)
- userId (id from users collection)
- taskId (id from task collection)
- timestamp
React Typescript - Fetch collection data
interface UserTask {
id: String;
taskId: String;
userId: String;
date: Date;
}
const [userTasks, setUserTasks] = useState<UserTask[]>([]);
const getTaskData = () => {
const taskRef = firestore.collection('taskData');
taskRef.get().then((snapshot) => {
const taskData = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
console.log(taskData)
})
}
I am able to get the TaskData which has userId and TaskId but have not been able to "join" the tables and get Users.name and Tasks.taskname.I want to get a output like below, How do I do that?
{
"taskName1": [
{
"name": "John",
"date": "12.01.2002"
},
{
"name": "Maya",
"date": "15.01.2002"
},
{
"name": "Hanna",
"date": "13.01.2003"
}
],
"taskName2": [
{
"name": "Maya",
"date": "20.04.2003"
},
{
"name": "Maya",
"date": "17.06.2003"
}
],
"taskName3": [
{
"name": "John",
"date": "21.05.2003"
}
]
}