This is the data that I fetched from firestore and I want to use it in my application to show the product details but I can't retrieve it into my application. Example, I want the data from shop->collections->bags->items to show the specific product details.

And here is my code in product-details.component.jsx:

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";

import { fetchCollectionsStart } from '../../redux/shop/shop.actions'


const ProductDetailsPage = ({ fetchCollectionsStart, match, collections }) => {

    const {title, items} = collections;

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

    console.log(match);

    const ShowProduct = () => {
        return (
            <div>
                {title}
            </div>
        )
    }

    return (
        <div className='product-details'>
            <div className="row">
                <ShowProduct />
            </div>
        </div>
    );

};

const mapDispatchToProps = dispatch => ({
    fetchCollectionsStart: () => dispatch(fetchCollectionsStart())
});

export default connect(null, mapDispatchToProps)(ProductDetailsPage);

The error pop up is shown as the image below:

I don't know why I can't destructure the data from collections. I thought I already successfully fetched it into my application? Thanks a lot for helping me!!