TypeError: comments.map is not a function react js

I got an error when I select an object, currently comments files are stored in another file and I'm accessing it in this file but I got an error saying "TypeError" comments.map is not a function

below is my code, please suggest me something and thank you :)

import React from "react";
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap";

function RenderDish({ dish }) {
  if (dish != null) {
    return (
      <div className="col-12 col-md-5 m-1">
        <Card>
          <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>
          <CardBody>
            <CardTitle>{dish.name}</CardTitle>
            <CardText>{dish.description}</CardText>
          </CardBody>
        </Card>
      </div>
    );
  } else {
    return <div></div>;
  }
}
function RenderComments(comments) {
  if (comments != null) {
    const commentsList = comments.map((Comment) => {
      return (
        <div className="container">
          <li key={Comment.id}>
            <p>{Comment.Comment}</p>
            <p>
              -- {Comment.author},
              {new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "2-digit" }).format(new Date(Date.parse(Comment.id)))}
            </p>
          </li>
        </div>
      );
    });
    return (
      <div className="col-12 col-md-5 m-1">
        <h3>Comments</h3>
        <ul className="list-unstyled">{commentsList}</ul>
      </div>
    );
  } else {
    return <div></div>;
  }
}
const DishDetail = (props) => {
  console.log("Dishdetail Component render invoked");
  if (props.dish != null) {
    return (
      <div className="row">
        <RenderDish dish={props.dish} />
        <RenderComments comments={props.dish.comments} />
      </div>
    );
  } else {
    return <div></div>;
  }
};

export default DishDetail;