PostCard import 오류

import 문제 없어 보이는데 댓글 확인을 누르면 오류 페이지가 뜹니다..

PostCard.js

import React, { useState, useCallback } from 'react';
import { Card, Button, Avatar, Popover, List, Comment } from 'antd';
import PropTypes from 'prop-types';
import { RetweetOutlined, HeartTwoTone, HeartOutlined, MessageOutlined, EllipsisOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import Link from 'next/link';
import { useSelector } from 'react-redux';
import PostImages from './PostImages';
import CommentForm from './CommentForm';

const PostCard = ({post}) => {
    const [liked, setLiked] = useState(false);
    const [commentFormOpened, setCommentFormOpened] = useState(false);

    const id = useSelector((state) => state.user.me && state.user.me.id);

    const onToggleLike = useCallback(() => {
        setLiked((prev) => !prev);
      }, []);
    
      const onToggleComment = useCallback(() => {
        setCommentFormOpened((prev) => !prev);
      }, []);

    return (
        <div style={{matginBotton: 20}}>
            <Card
                cover={post.Images[0] && <PostImages Images={post.Images}/>}
                actions={[
                    <RetweetOutlined key="retweet"/>,
                    liked
                        ? <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} />
                        : <HeartOutlined key="heart" onClick={onToggleLike} />,
                    <MessageOutlined key="message" onClick={onToggleComment} />,
                    <Popover key="more" content={(
                        <Button.Group>
                        {id && post.User.id === id
                          ? (
                            <>
                              <Button>수정</Button>
                              <Button type="danger">삭제</Button>
                            </>
                          )
                          : <Button>신고</Button>}
                      </Button.Group>
                    )}>
                    <EllipsisOutlined/>
                    </Popover>,
                ]}
          >
                 <Card.Meta
          avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
          title={post.User.nickname}
          description={post.content}
        />
            </Card>
           {commentFormOpened && (
            <div>
                <CommentForm post={post}/>
                <List
                     header={`${post.Comments.length}개의 댓글`}
                     itemLayout="horizontal"
                     dataSource={post.Comments}
                     renderItem={(item) => (
                        <li>
                          <Comment
                            author={item.User.nickname}
                            avatar={<Avatar>{item.User.nickname[0]}</Avatar>}
                            content={item.content}
                          />
                        </li>
                    )}
                />
            </div>  
           )}
        </div>
    );
};

PostCard.propTypes = {
    post: PropTypes.shape({
      id: PropTypes.number,
      User: PropTypes.object,
      content: PropTypes.string,
      createdAt: PropTypes.object,
      Comments: PropTypes.arrayOf(PropTypes.any),
      Images: PropTypes.arrayOf(PropTypes.any),
    }),
  };

export default PostCard