Single Post Type Error about classsed-graphql-mern-apollo HOT 4 OPEN

postMarkup = (
  <Grid>
    <Grid.Row>
      <Grid.Column width={2}>
        <Image
          src="https://react.semantic-ui.com/images/avatar/large/molly.png"
          size="small"
          float="right"
        />
      </Grid.Column>
      <Grid.Column width={10}>
        <Card fluid>
          <Card.Content>
            <Card.Header>{username}</Card.Header>
            <Card.Meta>{moment(createdAt).fromNow()}</Card.Meta>
            <Card.Description>{body}</Card.Description>
          </Card.Content>
          <hr />
          <Card.Content extra>
            <LikeButton user={user} post={{ id, likeCount, likes }} />
            <MyPopup content="Comment on post">
              <Button
                as="div"
                labelPosition="right"
                onClick={() => console.log('Comment on post')}
              >
                <Button basic color="blue">
                  <Icon name="comments" />
                </Button>
                <Label basic color="blue" pointing="left">
                  {commentCount}
                </Label>
              </Button>
            </MyPopup>
            {user && user.username === username && (
              <DeleteButton postId={id} callback={deletePostCallback} />
            )}
          </Card.Content>
        </Card>
        {user && (
          <Card fluid>
            <Card.Content>
              <p>Post a comment</p>
              <Form>
                <div className="ui action input fluid">
                  <input
                    type="text"
                    placeholder="Comment.."
                    name="comment"
                    value={comment}
                    onChange={(event) => setComment(event.target.value)}
                    ref={commentInputRef}
                  />
                  <button
                    type="submit"
                    className="ui button teal"
                    disabled={comment.trim() === ''}
                    onClick={submitComment}
                  >
                    Submit
                  </button>
                </div>
              </Form>
            </Card.Content>
          </Card>
        )}
        {comments.map((comment) => (
          <Card fluid key={comment.id}>
            <Card.Content>
              {user && user.username === comment.username && (
                <DeleteButton postId={id} commentId={comment.id} />
              )}
              <Card.Header>{comment.username}</Card.Header>
              <Card.Meta>{moment(comment.createdAt).fromNow()}</Card.Meta>
              <Card.Description>{comment.body}</Card.Description>
            </Card.Content>
          </Card>
        ))}
      </Grid.Column>
    </Grid.Row>
  </Grid>
);