javascriptの非同期処理が待ってくれません。

DetaiDashboard3.js、DetailDashboardList.js、api.jsがあります。
コードは以下のとおりです。

DetaiDashboard3.js

Javascript

const DetailDashboard3 = () => {
    const [kuchikomis, setKuchikomis] = useState([]);

    useEffect(() => {
        fetch();
    }, [])

    const preid = useParams();     
            const stringprename = JSON.stringify(preid);
            const obj = JSON.parse(stringprename);

    const fetch = async() => {
            const id = obj.id;
            const data = await Api.openDetailDashboard(id);
            console.log(data[0]); //1
            await setKuchikomis(data);
            console.log(data[0]); //2
            console.log(kuchikomis); //3
    }
    const classes = useStyles();
    return (
        <div className={classes.root}>
        <h1>詳細ページ</h1>
            <DetailDashboardList kuchikomis={kuchikomis} fetch={fetch} />
        </div>
    )
};
    
export default DetailDashboard3;

DetailDashboardList.js

Javascript
const DetailDashboardList = (props) => {
    const classes = useStyles();
    const kuchikomilist = props.kuchikomis.map((kuchikomi) => {
        return (            
        <ListItem key={kuchikomi.id}>
        <h1>kuchikomilistの内容</h1>
        省略
        </ListItem>
            )
    }
    );
    return (
        <div className={classes.root}>
            <h2>最近の投稿</h2>
            <ul className={classes.ul}>{kuchikomilist}</ul>
        </div>
    )
}
export default DetailDashboardList;

api.js

Javascript
export const openDetailDashboard = async(id) => {
    const kuchikomi = await db.collection("kuchikomi").doc(id);
    let kuchikomis = [];
    kuchikomi.get().then((doc) => {
        if (doc.exists) {            
            kuchikomis.push({
                id: doc.id,
                content: doc.data().content,
                kind: doc.data().kind,
                lowTemp: doc.data().lowTemp,
                Images: doc.data().Images,
            });
            console.log(kuchikomis); //4
            console.log(kuchikomis[0]); //5
        } else {
        }
    }).catch((error) => {
    });
    return kuchikomis;
};

結果
ブラウザの表示は、以下の２行のみ表示され、DetailDashboardList.jsの省略の部分は表示されません。

　詳細ページ
最近の投稿

しかし、サーバーを起動させた状態でDetailDashboardList.jsの一部（例えば<h1>タグ内の文言）を編集して保存をかけると省略の部分も表示されるのです！
もちろん本来は、省略の部分も初めから表示させたいです。

コンソールは、以下の順序で呼ばれ、//1と//2はundefinedで、//3は空の配列です。
DetaiDashboard3.js内で示した//1
DetaiDashboard3.js内で示した//2
DetaiDashboard3.js内で示した//3
api.js内で示した//4
api.js内で示した//5

このようなことが起こる原因は、思うように非同期処理が機能していないことが原因と考えたのですが解決策を知りたいです。
自分としては調べ尽くしたのですが分かりませんでした。
初歩的な質問で申し訳ありませんがよろしくお願いします。