Uncaught TypeError: Cannot read properties of undefined (reading 'source') in CartItem

I am getting an error in while accessing the data present in the cart via cartitem. I am not so good at this. can someone help me in rectifying the error??

import React from 'react'
import { Typography, Button, Card, CardActions, CardContent, CardMedia } from '@material-ui/core';

import useStyles from './styles';

const CartItem = ({ item }) => {
    const classes = useStyles
    return (
        <Card>
            <CardMedia image={item.media.source} alt={item.name} className={classes.media} />
            <CardContent className={classes.cardContent}>
                <Typography variant="h4">{item.name}</Typography>
                <Typography variant="h5">{item.line_total.formatted_with_symbol}</Typography>
            </CardContent>
            <CardActions className={classes.cardActions}>
                <div className={classes.buttons}>
                    <Button type="button" size="small">-</Button>
                    <Typography>{item.quantity}</Typography>
                    <Button type="button" size="small">+</Button>
                </div>
                <Button variant="contained" type="button" color="secondary">Remove</Button>
            </CardActions>
        </Card>
    )
}

export default CartItem

These are a few errors poppoing in the browser

We would need more information to tell exactly why, but 'media' (or possibly item) seems to be undefined per the error.

You can add some saftey with this syntax:

<CardMedia image={item?.media?.source} alt={item.name} className={classes.media} />

Notice the '?' above....more info on what that does here