React NewsAPIで画像がないときの処理の実装

前提

ReactでNewsAPIを用いたアプリケーションを作成しています
UIライブラリはMaterial-UIを使用しています。

実現したいこと

ニュースによって画像がない場合があります。
その際は自分で用意した画像を表示させたいです。

発生している問題・エラーメッセージ

このような画面になっています。

該当のソースコード

import { useEffect, useState } from "react"
import axios from 'axios';

import Tabs from '@mui/material/Tabs';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button'
import { CardActionArea, CardActions, CardContent, CardMedia, Typography } from "@mui/material";

function App2(params) {
    const [articles, setArticles] = useState([]);

useEffect(() => {
    const fetchData = async () => {

        const url = "http://newsapi.org/v2/top-headlines?country=jp&category=technology&apiKey=6262f28bbe5740e995c090e8990c299f";
        
        try {
            const result = await fetch(url);
            const json = await result.json();
            setArticles(
                json.articles
            );
        } 
        catch (e) {
            console.log(e);
        }

    };
    
    fetchData();

    }, []
);
    
return (
    <div>

<ul>

{articles.map((item,i)=>(

        <li key={i}>
        <Card>
        <Grid container>
                        <Grid item xs={4}>
                        <CardActionArea>
                        <CardMedia
                                    component="img"
                                    alt="ニュース画像"
                                    height="255"
                                    image={item.urlToImage}                                                    
                                    title="ニュース画像"
                                />
            </CardActionArea>
            </Grid>

            <Grid item xs={8}>
            <CardContent>
            <Typography gutterBottom variant="h5">
                                    {item.title}
                                </Typography>

                                <Typography
                                    variant="caption"
                                    color="textSecondary"
                                    component="p"
                                >
                                    {item.description}
                                </Typography>

                                <CardActions>
                                    <Button
                                        size="small"
                                        color="primary"
                                        href={item.url}
                                    >
                                        詳細を確認する
                                    </Button>
                                </CardActions>
                                </CardContent>
            </Grid>
            </Grid>
        </Card>
        </li>
    ))}
</ul>
</div>

)
}

export default App2