Access Nested Firestore Data in React?

I've been having this issue for the past few hours now, and the only reason I'm posting a question so quickly is because there doesn't seen to be too much information on this topic, or at least this specific point.

I currently have a cloud function that grabs and saves data from a third-party API into my Firebase Firestore Database. In my frontend application I'm using React and attempting to display this data by mapping it to list Items. All high level items in the tree are fine to reach, and all the data from those is already displaying properly.

Any nested item though, returns with 'Cannot read property of undefined'. When console logging my top level container all subsequent data displays in the terminal. I can break it down all the way to the top level Array which shows me this structure:

I need to access the keys within those objects, but as I mentioned earlier this is what I'm greeted with when I try to do so:

Uncaught TypeError: Cannot read property 'title' of undefined
    at ProductScreen (ProductScreen.js:56)

Also Here is the code from the current screen I'm working on, and how I am trying to access the data:

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from '../actions/productActions';

const ProductScreen = (props) => {
    const [qty, setQty] = useState(1);
    const productDetails = useSelector(state => state.productDetails);
    const { product, loading, error } = productDetails;
    const resp = props.match.params.id;
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(detailsProduct(resp));
        return () => {
            //
        };
    }, []);

    const handelAddToCart = () => {
        props.history.push(`/cart/${resp}/?qty=${qty}`)
    }

    return <div>
        <div className='back-to-result'>
            <Link to='/'>Back to Results</Link>
        </div>
        {loading ? <div>Loading...</div> :
            error ? <div>{error}</div> :
                (
                    <div className='details'>
                        <div className='details-image'>
                            <img src={product.thumbnailImage //This ever comes through as well} alt='product'></img> 
                        </div>
                        <div className='details-info'>
                            <ul>
                                <li>
                                    <h4>{product.title}</h4> //This data comes through fine.
                                </li>
                                <li>
                                    {product.rating} Stars ({product.numReviews} Reviews)
                                </li>
                                <li>
                                    <b>{product.variants.price}</b>
                                </li>
                                <li>
                                    Description:
                                    <div>
                                        {product.description // This data comes through fine} 
                                    </div>
                                    <div>
                                        <select>
                                            {
                                            console.log(product.sizes.title // Here is where I am trying to console log the Size Title) 
                                            }

                                        </select>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className='details-action'>
                            <ul>
                                <li>
                                    <b>Price:</b> ${product.variants.price // This data does not come through either, has the same error} 
                                </li>
                                <li>
                                    Status: Currently Unavailable
                                </li>
                                <li>
                                    Qty: <select>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                    </select>
                                </li>
                                <li>
                                    <button className='button' onClick={handelAddToCart}>Add to Cart</button>  
                                </li>
                            </ul>
                        </div>
                    </div>
                )
        }
    </div>
}

export default ProductScreen

I'm not sure where or what I'm doing wrong. Any help would be greatly appreciated. Thank you.

*Apologies for not including the main code initially, wasn't sure if it was going to be helpful If all I was doing was console logging, but I hop this is able to give a better perspective on the situation.