I'm trying to develop a 1-1 chat app, but I'm unable to retrieve the other user's photoURL, would someone kindly guide me as to how would I do that?

const [user] = useAuthState(auth);

This enables me to access the default user's (my account) photoURL when I add it on to Avatar.

     <Avatar src={user.photoURL} marginEnd={3} />

but how can I access the photoURL of the other users?

export default function Sidebar() {
  const [user] = useAuthState(auth);
  const [snapshot, loading, error] = useCollection(collection(db, 'chats'));
  const chats = snapshot?.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  const userSecondary = snapshot?.docs.map((doc) => ({
    id: doc.id,
    ...doc.photoURL()
  }));

  const router = useRouter();

  const redirect = (id) => {
    router.push(`/chat/${id}`);
  };

  const chatExists = (email) =>
    chats?.find(
      (chat) => chat.users.includes(user.email) && chat.users.includes(email)
    );

  const newChat = async () => {
    const input = prompt('Enter email of chat recipient');
    if (!chatExists(input) && input != user.email) {
      await addDoc(collection(db, 'chats'), { users: [user.email, input] });
    }
  };

  const chatList = () => {
    return chats
      ?.filter((chat) => chat.users.includes(user.email))
      .map((chat) => (
        <Flex
          key={Math.random()}
          p={3}
          align='center'
          _hover={{ bg: 'gray.100', cursor: 'pointer' }}
          onClick={() => redirect(chat.id)}
        >
          <Avatar key={user.uid} src={user.photoURL} marginEnd={3} />
          <Text>{getOtherEmail(chat.users, user)}</Text>
          <Text>{user.email}</Text>
        </Flex>
      ));
  };

  return (
   
        <Flex align='center'>
          <Avatar src={user.photoURL} marginEnd={3} />
          <Text>{user.displayName}</Text>
      </Flex>

      <Button m={5} p={4} onClick={() => newChat()}>
        New Chat
      </Button>

    
    </Flex>
  );
}