React async awaitの返り値がundefinedになるのを解決したい

下記のコードを動かすと、
{i('salon-id')}
がundefinedになります。
async awaitのi functionから情報を取得する前に、読み込まれているのが原因だと思いますが、解決方法がわかりません。
async awaitの情報を読み込んだのち、jsxで情報を表示する方法が知りたいです。
firebaseはv9を使っています。
よろしくお願い致します。

javascript
1import React, { useState, useEffect } from "react"
2import { Link } from 'react-router-dom';
3// firebase関連
4import { db } from "../../../firebaseConfig"
5import {
6    collection,
7    orderBy,
8    query,
9    getDocs,
10    limit,
11    where
12} from 'firebase/firestore'
13import 'firebase/compat/auth'
14// 画像
15import MainTopImg from '../../../images/imecon-personal-color.jpeg'
16import '../../../styles/Top.scss'
17
18const MobileContents = () => {   
19    const [newSalonList, setNewSalonList] = useState([])
20
21    useEffect(() => {        
22        (async () => {
23            const salons = query(collection(db, "salon"), orderBy("createAt", "desc"), limit(5));
24            const querySnapshot = await getDocs(salons);
25            let salonList = [];
26            await querySnapshot.forEach((doc) => {
27                salonList = [...salonList, {
28                    salonId: doc._document.data.value.mapValue.fields.salonId.stringValue,
29                    salonName: doc._document.data.value.mapValue.fields.salonName.stringValue,
30                    salonNameKana: Boolean(doc._document.data.value.mapValue.fields.salonNameKana) ? '【' + doc._document.data.value.mapValue.fields.salonNameKana.stringValue  + '】': '',
31                    address: Boolean(doc._document.data.value.mapValue.fields.access) ? doc._document.data.value.mapValue.fields.access.stringValue: '',
32                    mainImageUrl: doc._document.data.value.mapValue.fields.mainImageUrl.stringValue,
33                    menuTitle: doc._document.data.value.mapValue.fields.mainImageUrl.stringValue,
34                    price: ''
35                }]
36            })
37            setNewSalonList(salonList)
38        })();
39    }, [])
40
41    function i (salonId) {
42        // ここから
43        (async () => {
44            try {
45                const q = query(collection(db, "salon", salonId, "menu"), where("top", "==", true));
46                const querySnapshot2 = await getDocs(q);
47                await querySnapshot2.forEach((doc) => {
48                    // doc.data() is never undefined for query doc snapshots
49                    console.log(doc.data().menuTitle);
50                    return(doc.data().menuTitle)
51                });
52            } catch(err) {
53                console.log(err)
54                return 'err'
55            }
56        })()
57    }
58
59    return (
60        <div>
61            <img src={MainTopImg} alt="mainTopImg" className="mainImg"/>
62            <Link to="/mypage">マイページ</Link>
63            <div className="form">
64                <form action="/search" method="GET" className="search_container">
65                    <input type="text" name="query1" placeholder="サロン名・エリア・メニューなどから検索" />
66                    <input type="submit" /> 
67                </form>
68            </div>
69            <div>
70                <div className="newSalonTitleParent">
71                    <p className="newSalonTitle">｜ 新着のサロン</p>
72                </div>
73                {newSalonList.map((data) => {
74                    console.log(i('salon-id'))
75                    return (
76                        <li key={data.salonId}>
77                            <img src={data.mainImageUrl} alt="" />
78                            <Link to={'/salon/' + data.salonId}>
79                                <p>{data.salonName}{data.salonNameKana}</p>
80                            </Link>
81                            <p>{data.address}</p>
82                            <div>{}</div>
83                        </li>
84                    )
85                })}
86                <div>{i('salon-id')}</div>
87            </div>
88        </div>
89    );
90}
91
92export default MobileContents;
93