Apollo mutation that depends on a previous mutation in a for loop

I'm using react native and apollo client for an app that creates a chat given an array of selected users. My code looks like this:

        const [addUser, {
    data: userAdded, loading: addingUsers, error: errorAddingUsers,
  }] = useMutation(ADDUSERTOCHAT)

  const [makeChat, {
    data: chat, loading: chatLoading, error: chatError,
  }] = useMutation(NEWCHAT, {
    variables: { ownerId: viewerId },
    onCompleted: () => {
      for (let i = 0; i < selectedFriends.length; i++) {
        addUser({
          variables: {
            chatId: chat.newChat.id,
            id: selectedFriends[i].id,
          },
          onCompleted: () => {
            if (i === selectedFriends.length - 1) {
              navigation.navigate('Chat', { chatId: chat.newChat.id })
            }
          },
        })
      }
    },
  })

Right now, this does not work. I am not sure how to run the addUser mutation only after the chat is created, and I'm also not sure if the for loop will work to run a mutation for every selected friend. I also need to navigate to the screen chat once everything in the process is done and I'm not sure if the condition I have will work for that. In sum, I'm a bit lost with how to sequence these mutations and can't get it to work. Any help is appreciated thanks!