Reactで非同期処理で取得した値をもとにさらに非同期処理を行う

Reactとfirebaseで本を共有するアプリを作っており、フレンドページに行くとログインユーザーのbookListを参照して共通する本を表示する機能を実装しています。

Friendコンポーネントのマウント時にFirestoreからフレンドユーザーの情報を取得
↓
取得した情報を元にログインユーザーと共通の本を見つける

という処理まで書いたのですが、sharedBooksの中身はisbnコードだけなので、それを使って外部APIを叩いてタイトルや著者などの情報を取得したいです。

副作用を生じる処理なのでuseEffectを書こうと思ったのですが、マウント時にはsharedBooksの中身は空なのでうまく行きません。

実現する方法はあるでしょうか？あるいはこういう処理を行うこと自体推奨されないのでしょうか？

js
1const Friend = ({ friendId }) => {
2  const classes = useStyles();
3  const [loginUser, setLoginUser] = useRecoilState(loginUserState);
4  const [friend, setFriend] = useState(null);
5
6// フレンドユーザーの情報を取得
7  useEffect(() => {
8    db.collection('users')
9      .doc(friendId)
10      .get()
11      .then(doc => setFriend(doc.data()));
12  }, [friendId]);
13
14  if (!friend || !loginUser) {
15    return <p>Loading...</p>;
16  }
17
18// ログインユーザーとフレンドユーザーのbookListを比較して共通の本を見つける
19  const arr = [...loginUser.bookList, ...friend.bookList];
20  const duplicateArr = arr.filter(
21    item =>
22      loginUser.bookList.some(book => book.isbn === item.isbn) &&
23      friend.bookList.some(book => book.isbn === item.isbn)
24  );
25  const sharedBooks = duplicateArr.filter((item, index, array) => {
26    return array.findIndex(item2 => item.isbn === item2.isbn) === index;
27  });
28
29  return (
30    <Grid item>
31      <Box boxShadow={7} bgcolor="background.paper">
32        <Link href={`/users/${friend.twitterUsername}/bookShelf`}>
33          <Card className={classes.root} variant="outlined">
34            <div className={classes.details}>
35              <CardContent className={classes.content}>
36                <Box display="flex">
37                  <Avatar alt="profile-img" src={friend.twitterProfileImgUrl} />
38                  <Box m={1} />
39                  <Box>
40                    <Typography variant="subtitle1">
41                      {friend.twitterDisplayName}
42                    </Typography>
43                    <Typography variant="subtitle2" color="textSecondary">
44                      @{friend.twitterUsername}
45                    </Typography>
46                  </Box>
47                </Box>
48                <Box m={2} />
49                <Typography variant="subtitle2" color="primary">
50                  共通の本が{sharedBooks.length}冊あります
51                </Typography>
52              </CardContent>
53            </div>
54          </Card>
55        </Link>
56      </Box>
57    </Grid>
58  );
59};
60
61export default Friend;