React.jsで非同期処理を適切に操作したい。

Question

前提

ちょっとしたWebアプリを個人で作成しています。
利用しているのは、ReactとFirebaseを利用しています。
作成にあたり、ユーザーのコレクションに紐づけている別のコレクションを引き出す際に、stateの値が変わらず適切に変わらず困っています。
以前、似たような非同期処理を修正したことはあるのですが、同じ方法ではうまくいかず悩んでいます。

例
Aさんを選択→紐づいているaの情報を取得したい→取得できず。
Bさんを選択→紐づいているbの情報を取得したい→直前に触っていたAさんのaの情報を取得。

実現したいこと

usersのコレクションに格納してあるdoc（ドキュメントのID）を利用して別のコレクションpetsからドキュメントのIDがdocと一致するものを取得したい。

該当のソースコード

import "./styles.css";
import React,{useState,useEffect} from 'react';


export default function App() {

  const [users,setUsers] = useState([])
  useEffect(() => {
    firebase.firestore()
    .collection("user")
    .onSnapshot((snapshot) => {
    const dbData = snapshot.docs.map((doc) => {
        return doc.data();
    });
    setUsers(dbData);
    console.log(users);
    });
  }, []);


  const [pet,setPet]=useState([])
  const [petName,setPetName]=useState([])
  
  const hundleChange=async(index)=>{
    firebase.firestore()
    .collection("pets")
    .doc(users[index].doc)
      .get()
      .then((doc) => {
        const new_data = doc.data();
        setPet(new_data)
      })
  }


  useEffect(()=>{
    console.log(pet);
    setPetName(pet.name)
  },[pet])
  useEffect(()=>{
    console.log(petName);
  },[petName])



  return (
    <div className="App">
      {users.map((val,index)=>{
        const name = val['name']
        return(
          <div key={index}>
            <button
              onClick={()=>{
                hanndlChange(index)
              }}
            >{name}</button>
          </div>

          <div>
            {name &&
            <div>
              <h2>{name}のペットは{petName}です</h2>
            </div>
            }
          </div>
        );
      })}
    </div>
  );
}

かなりざっくり１から書いたのでこれだけだは動かないと思います。。
すみません

試したこと

useEffectを利用して解決しようとしてみましたがうまくいかず困っています。

Comments

[maisumakun]

> Aさんを選択→紐づいているaの情報を取得したい→取得できず。
Bさんを選択→紐づいているbの情報を取得したい→直前に触っていたAさんのaの情報を取得。

これは、どの部分がそのような挙動を示しているのでしょうか？