Im a learner front-end developer and having a problem how to fetch data from multiple api. here is my code.

  useEffect(() => {
    async function fetchTasks() {
      try {
        const response = await fetch('/api/tasks');
        if (!response.ok) {
          throw new Error('Failed to fetch tasks');
        }
        const data = await response.json();
        setTasks(data); // assuming the API returns an array of tasks
      } catch (error) {
        console.error('Error fetching tasks:', error);
      }
    }

    async function fetchUsers(){
      try {
        const response = await fetch('/api/users');
        if (!response.ok) {
          throw new Error('failed to fetch users')
        }
        const data = await response.json()
        setUsers(data);
      } catch (error) {
        console.error('Error fetching users:', error)
      }
    }

    fetchUsers();
    fetchTasks();
  }, []);

    <div>
      {tasks.map((task) => {
        const requester = users.find(user => user.user_id === task.request_id);
        const helper = users.find(user => user.user_id === task.helper_id);
        return(
        <div key={task.task_id} className="border p-4 mb-4 shadow-sm rounded-lg bg-background">
          <h1>{requester?.name}</h1>
          <Image src={requester.profilepict} alt='requester profile picture' width={50} />
          <h3 className="text-xl font-semibold">{task.title}</h3>
          <div className='flex items-center gap-2 mb-2'>
            <p>{task.urgency_level}</p>
            <p></p>
            <p className=''>{task.location}</p>
            {task.virtual && <p className='p-1 px-2 bg-second inline text-white rounded-md'>Virtual</p>}
          </div>
          <div className='bg-main px-4 py-2 text-white inline rounded-md'>Rp {task.price}</div>
        </div>
        )
      })}
    </div>

so the requester_id is the users_id who created the task, and the helper id is the users_Id who accepted the task. thank you for ur help