React не может прочитать свойство undefined

Не могу понять, где моя ошибка. Не удается отобразить список комментариев блога. Я использую django и react. Из приведенного ниже кода я попытался оценить каждую запись блога с комментариями. Но я не могу получить свойство комментария из блога. Если я делаю что-то вроде {blog.title} я получаю заголовок блога обратно в браузер. Поскольку комментарии связаны с каждым постом, я пытаюсь получить различные свойства комментария из объекта блога (как я указал в коде ниже), но значение, которое я получаю, не определено. У меня есть следующие модели постов блога и комментариев блога.

class BlogComment(models.Model):
    post = models.ForeignKey(BlogPost, on_delete=models.SET_NULL, related_name="post_comment",  null=True)
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.SET_NULL, related_name="user_comment", null=True)
    name = models.CharField(max_length=200, null=True, blank=True)
    comment = models.TextField(null=True, blank=True)
    dateCreated = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return str(self.user.username)

class BlogPost(models.Model):
    ...
    author = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, on_delete=models.CASCADE)
    body = models.TextField()
    dateCreated = models.DateTimeField(auto_now_add=True)
And the serializers for both models are:

class CommentSerializer(serializers.ModelSerializer):
    class Meta:
        model = BlogComment
        fields = '__all__'

class BlogPostSerializer(serializers.ModelSerializer):
    comments = serializers.SerializerMethodField(read_only=True)
    class Meta:
        model = BlogPost
        fields = "__all__"

    def get_comments(self, obj):
        comments = obj.comment_set.all()
        serializer = CommentSerializer(comments, many=True)
        return serializer.data

<h2>{blog.title}</h2>
<img src={blog.image} />
<div variant='flush'>
                    {blog.comments.map((comment) => (
                        <div key={comment.id}>
                            <strong>{comment.name}</strong>            
                            <p>{comment.dateCreated}</p>
                            <p>{comment.comment}</p>
                        </div>
                    ))}
                </div>

Как это исправить?

<h2>{blog?.title}</h2>
<img src={blog?.image} />
<div variant='flush'>
                    {blog?.comments.map((comment) => (
                        <div key={comment?.id}>
                            <strong>{comment?.name}</strong>            
                            <p>{comment?.dateCreated}</p>
                            <p>{comment?.comment}</p>
                        </div>
                    ))}
                </div>