Estoy tratando de desarrollar una aplicación de chat 1-1, pero no puedo recuperar la URL de la foto del otro usuario, ¿alguien podría guiarme amablemente sobre cómo podría hacerlo?

const [usuario] = useAuthState(autorización);

Esto me permite acceder a la URL de la foto del usuario predeterminado (mi cuenta) cuando la agrego a Avatar.

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

pero ¿cómo puedo acceder a la photoURL de los otros usuarios?

 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> ); }