Error: Invalid src prop on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`

I'm creating an array of objects where I have an image src property whose name is coverSrc, and I'm exporting & importing it into my main component. In my main component, I m using the Material UI CardMedia component to display images. but it gives me the following error:

Invalid src prop on next/image, hostname "res.cloudinary.com" is not configured under images in your next.config.js

data.js

export const dataList = [
{
    id: 1,
    title: "Dim Sums",
    serviceTime: "24-30min",
    deliveryFee: 1.5,
    category: "dish",
    cuisine: "chinese",
    rating: 2,
    price: 4100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1625119382/image_apxesv.png",
  },
{
    id: 2,
    title: "Dim loups",
    serviceTime: "22-35min",
    deliveryFee: 1.3,
    category: "dish",
    cuisine: "italian",
    rating: 3,
    price: 3100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1627596941/image_apiop.png",
  },
]

ListItem.jsx

import {
  Card,
  CardHeader,
  Avatar,
  CardMedia,
  CardContent,
  Typography,
} from "@material-ui/core";
import React from "react";
import useStyles from "../../../styles/style.js";
import Image from "next/image"


const ListItem = ({
  item: { coverSrc, title, price, deliveryFee, serviceTime, rating },
}) => {
  const classes = useStyles();
  return (
    <Card className={classes.listItemMainDiv}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.ratingAvatar}>
            {rating}
          </Avatar>
        }
        title={title}
      />
      <CardMedia className={classes.media} title="List item" >
          <Image src={coverSrc} layout="fill" alt="image"/>
      </CardMedia>
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p" gutterBottom>
          Delivery Fee ${deliveryFee}
        </Typography>
      </CardContent>
      <div className={classes.cardFooter}>
        <Typography>{serviceTime}</Typography>
        <Typography>{price}</Typography>
      </div>
    </Card>
  );
};

export default ListItem;

next.config.js

// next.config.js
module.exports = {
  images: {
    domains: ["res.cloudinary.com"],
  },
}

I think import from array of object's property coverSrc there is some problem.

Can anyone help me to figure it out? How can I export coverSrc property from an array of objects?