[Solved]-Cannot read properties of undefined (reading 'defaultSize')-Reactjs

import { useEffect, useState } from "react";

import { getProductDetails } from "../redux/actions/productActions";

import { SizeOptions } from '../components/SizeOptions';

const ProductScreen = ({match}) => {

    const dispatch = useDispatch();

    const productDetails = useSelector(state => state.getProductDetails);
    const { loading, error, product } = productDetails;

    const [ src, setSrc ] = useState();


    useEffect(() => {
    if (product && match.params.id !== product._id) {
        dispatch(getProductDetails(match.params.id));
        }
    }, [dispatch, match, product]);
    
    <div className='sizebuttons'>
        {product && (product.size || []).map((size, index) => (<SizeOptions  key={index} size={size} changeSrc={src => setSrc(src)}/>))}
    </div>
    
return (
    <model-viewer
        id="model-viewer"
        src={src || product.defaultSize}
        alt={product.productName}
        ar
        ar-modes="scene-viewer quick-look"
        ar-placement="floor"
        shadow-intensity="1"
        camera-controls
        min-camera-orbit={product.mincameraorbit} 
        max-camera-orbit={product.maxcameraorbit}
        interaction-prompt="none">  
            <button slot="ar-button" className="ar-button">
                View in your space
            </button>
    </model-viewer>
)};