add blank on missing image product

src/components/ProductHistoryList/ProductHistoryList.jsx

 import { useState, useEffect } from 'react';
 import { Box, Typography, IconButton, Pagination, Button } from '@mui/material';
 import { useSelector, useDispatch } from 'react-redux';
+import defaultImage from "../../assets/images/default.png"
 
 import Grid from '@mui/material/Grid2';
 
           let minPriceCurrency = minVariantPrice.currencyCode
           let maxPrice = maxVariantPrice.amount
           let maxPriceCurrency = maxVariantPrice.currencyCode
-          let img_url = images[0]?.url
+          let img_url = images[0]?.url || defaultImage
           let collection_name = collections[0]?.title
 
           if (index < 4) {

src/components/ProductSuggestion/ProductSuggestion.jsx

 import { useSelector } from 'react-redux';
 import Grid from '@mui/material/Grid2';
 import { useNavigate } from "react-router-dom";
+import defaultImage from "../../assets/images/default.png"
 
 const ProductSuggestion = () => {
 
           let minPriceCurrency = minVariantPrice.currencyCode;
           let maxPrice = maxVariantPrice.amount;
           let maxPriceCurrency = maxVariantPrice.currencyCode;
-          let img_url = images[0]?.url;
+          let img_url = images[0]?.url || defaultImage
           let collection_name = collections[0]?.title;
 
           return renderProduct(