Displaying an Array of Videos under a Product - data map slice javascript firebase collection: Data showing as empty array []

Question

I'm trying to retrieve a Slice or some Data from an Array nested under a Product under the field videoURL.

I think either I'm using React Hooks wrong, or useEffect wrong.

 const [reviews, setReviews] = useState();

 useEffect((productID) => {
        firestore
        .collection("products")
        .doc(productID)
        .collection("productReviewClips")
        .get()
        .then((snapshot) => {
            setReviews([
                ...snapshot.docs.map((doc) => {
                    return {
                        ...doc.data(),
                        documentID: doc.id,
                        };
                    }),
                ]);
            })
        console.log(reviews)
    }, [productID]);
 >              {reviews.slice(0, 3).map((videoUrl, pos) => {
                const [] = videoUrl;
                const configProduct = {
                    ...product,
                  };
                return (
                    <ReactPlayer  playing={true}
                    url={videoUrl}
                    width="24%"
                    height="100%"
                    controls
                    muted
                    loop
                    key={pos}  {...configProduct} />
                );
              })}
            />

Answer 1

After playing with it, the Reactiflux discord, and the Firebase Developers Discord, I was able to get my list of Review Videos from Each productID's videoURLs and display them on each product page according to each product's ID.

This can be a similar model for others attempting to display user generated video blob reviews of a product by placing the video blobs in their own collection under a product.

useEffect(() => {
        firestore
        .collection("products")
        .doc(productID)
        .collection("productReviewClips")
        .get()
        .then((snapshot) => {
            setReviews([
                ...snapshot.docs.map((doc) => {
                    return {
                        ...doc.data(),
                        documentID: doc.id,
                        };
                    }),
                ]);
            })
    }, []);
return (
<div>
 {reviews.map((documentID, pos) => {
                const {videoUrl} = documentID
                const configProduct = {
                    ...documentID,
                  };
                return (
                    <ReactPlayer  playing={true}
                    url={videoUrl}
                    width="24%"
                    height="100%"
                    controls
                    muted
                    loop
                    key={pos}  {...configProduct} />

                );
              })}
</div>
)