【REACT】Objects are not valid as a React child (found: [object Promise]).のエラーが解決できずに困っております。

プログラム初心者の質問です。
react.jsとfirebaseを使ってSNSのようなアプリを作成しているので、↓のようなエラーが出て困っています。

useEffectを使ってfirebase内のユーザー投稿データを抽出しようとしているのですが、
useStateのsetLists(Lists)をすると上のようなエラーが出てしまいます。

該当コードは下記になります。

import React, {useState, useEffect, useContext} from "react";
import { AuthContext } from "../providers/AuthProvider";
import * as Api from "../service/api";
import {Link} from "react-router-dom";
import {Avatar} from "@material-ui/core";

const MessageSender=()=>{
    const currentUser =useContext(AuthContext);
    const [inputName, setInputName] =useState("");
    const [Lists, setLists]=useState([]);
    
    useEffect(async ()=>{
        const Lists =await Api.initUserPost();
        setLists(Lists);
    },[])

    const todoList =Lists.map((post)=>{
        return (
            <div key={post.id}><p><Avatar src={post.photoURL} />{post.displayName}</p>投稿内容：{post.comment}<hr></hr></div>
        );
    })

    const post= ()=>{
        Api.addPost(
            inputName,
            currentUser.currentUser.photoURL,
            currentUser.currentUser.displayName,
            currentUser.currentUser.uid
            );
        setInputName("");
    }

    return(
        <div>
       {currentUser.currentUser ? 
            (
              <>
                <form>
                    <textarea 
                    placeholder="Post"
                    value={inputName} 
                    onChange={(e)=>setInputName(e.currentTarget.value)}
                    />
                    <button type="button" onClick={()=>post()} disabled={inputName.length >0 ? false:true}>投稿</button>
                </form>
              </>
              ) : (
            <>
            <div>
                <p>loginして投稿してください</p>
                <p><Link to="/login">ログイン</Link></p>
            </div>
            </>
            )}
            <div>
            <h2>コメント</h2>
            <ul>{todoList}</ul>
            {console.log(Lists)}
        </div>

        </div>
    )
}

export default MessageSender;

api.js

export const initUserPost = async () =>{
    const postsList =await db.collectionGroup("posts").orderBy("timestamp","desc");

    return postsList.get().then((snapShot)=>{
        let postsList =[];
            snapShot.forEach((doc)=>{
            postsList.push({
                uid: doc.data().uid,
                id: doc.id,
                comment: doc.data().comment
            });
        });
        return postsList;
    })
}

また、エラー部分と思われる
setLists(Lists)
を削除してchoromeのconsole画面を見たところ、データは抽出できているようです。

かなりの時間ググったのですが、いまだに解決方法がわかりませんでした。

ご助言頂ければ幸いです。

よろしくお願いします。

追加
useEffect内でasync awaitを使うのが良くないと言うことを教えて頂いたので、
uesEffectを下記のコードに変更しましたが、同様のエラーが出ます。

    useEffect(()=>{
        (async () => {
            const Lists = await Api.initUserPost();
　　　　　　　setLists(Lists);
            console.log(Lists);
        }) ()
    },[])