getting "destroy is not a function" error in useEffect while using async

Question

using async on the useEffect function is giving error

TypeError: destroy is not a function

in this block

useEffect(() => {
        let tempArray = []
        postIds.map((postid,idx) => {
            const unsub = onSnapshot(doc(db,"posts",postid)
            ,(doc) => {
                tempArray.push(doc.data())
                setPost([...tempArray])
            })
        })
        
    }, [postIds])

here is the full code

import React, { useContext, useEffect, useState } from 'react'
import Navbar from 'components/Navbar'
import { AuthContext } from '@/context/auth'
import { doc, onSnapshot } from 'firebase/firestore'
import { db } from '@/firebase'


function ProfileComp() {

    const {user} = useContext(AuthContext)
    const [userData,setUserData] = useState({})
    const [posts,setPost] = useState([])
    const [postIds,setPostId] = useState([])

    useEffect(()=>{
        const unsub = onSnapshot(doc(db,"users",user.uid),(doc)=>{
            setUserData(doc.data())
            setPostId(doc.data().posts)
        })

        return()=>{
            unsub();
        }
    },[user])

    useEffect(() => {
        let tempArray = []
        postIds.map((postid,idx) => {
            const unsub = onSnapshot(doc(db,"posts",postid)
            ,(doc) => {
                tempArray.push(doc.data())
                setPost([...tempArray])
            })
        })
        
    }, [postIds])


  return (
    <div>
        <Navbar userData={userData}></Navbar>
        <div>
            <div className='profile-details'>
                <img src={userData?.dpURL} height={'250'} width={'250'} style={{
                    borderRadius:'50%'
                }} ></img>
                <div className='dpname' style={{flexBasis:'40%', textAlign:'center'}}>
                    <h1>{userData?.name}</h1>
                    <h3>
                        Posts: {userData?.posts?.length}
                    </h3>
                </div>
            </div>

          <hr></hr>

            <div className='profile-vids'>
                {
                    posts.map((post)=>{
                        <video src={post.postURL}/>
                    })
                }
            </div>
        </div>

    </div>
  )
}

export default ProfileComp

if I don't use async I still got the Post array but while using map on Post array it says it is undefined

 posts.map((post)=>{
   <video src={post.postURL}/>
})