I'm learning to use firebase and react. I have shared my firestore collection image. and my code for fetching the array from my document is given below.

This code is fetching the data from my firestore database and then storing the result in my watchlistMovies react state. when i try to log the react state or even data.data() it gives the desired result but when i try to map over the array or do something similar like logging watchlistMovies.myList[0].media_type it hits me with an error. i tried my best trying different things making it work but it breaks a thing or two in process.

I hope someone here will help me. Thank you in advance! : )

updated the code

const Watchlist = () => {

    const [watchlistMovies, setwatchlistMovies] = useState([]);
    const {currentUser} = useAuth()
    const usersCollectionRef = collection(db,"users")
    const docRef = doc(db,"users",currentUser.uid)
    
    useEffect(() => {
        const getWatchListMovies = async () => {
            const data = await getDoc(docRef)
            if (data.exists()) {
                console.log(data.data());
                setwatchlistMovies([...watchlistMovies ,data.data().myList])
            } else {
                console.log("empty");
            }
        }
        getWatchListMovies();
    }, [])
    
    console.log(watchlistMovies);

    // console.log(watchlistMovies.myList[0]);

    return (
        <div className="content-page-area">
            <h1 className="trending-text">  My Watchlist </h1>
           
            
            <Container className="watchlist-container">
            <hr/>


            {watchlistMovies.map(
            (item) => (
                <ListContent
                item_poster={item.poster_url}
                item_title={item.media_title}
                item_year={item.release_year}
                item_rating={item.media_rating}
                item_type={item.media_type}
                item_id={item.media_id}
                />
            )
            )}


            
            </Container>
            <br/>
            <br/>
            <br/>
        </div>
    )
}

export default Watchlist