Как добавить комментарии под каждым постом в ReactJs + Django

Я хочу спросить; если я предоставляю пользователям определенный контент или сообщение, и они могут добавить ответ на это сообщение, чтобы позволить им добавить ответ, они должны указать Id для сообщения, когда они отправляют, но у меня проблема с этим;

Следующее: сначала извлекаем slug, который будет приводить контент на основе выбора пользователя, а затем присваиваем => let IdPost = data.posts.id для соответствия комментарию

const { slug } = useParams();
const [data, setData] = useState({ posts: [] });

useEffect(() => {
axios.get(slug).then((res) => {
setData({ posts: res.data });
console.log('a single post', res.data);
//  author, content, id, image, published, slug, title
});
}, [slug]);


let IdPost = data.posts.id 

и здесь для ввода комментария и отправки его:

const createComment = Object.freeze({
  body: '',
});

const [postComment, updateComment] = useState(createComment);

const handlerOnChange = (e) => {
   updateComment({
    ...postComment,[e.target.name]: e.target.value 
  });
};

const handlerOnSubmit = (event) => { event.preventDefault();

let formComment = new FormData();
formComment.append('body', postComment.body);
axios.post(`http://localhost:8000/comment/create/`, formComment, {
  headers: { Authorization: `JWT ${localStorage.getItem('token')}`,
           'Content-Type': 'application/json' }
})
 };

этот код для перечисления комментариев:

const [Comments, setComments] = useState([]);
useEffect(() => {
   axios.get("http://localhost:8000/comment/list").then((res) => {
const allComments = res.data;
setComments(allComments);
});
  }, [setComments]);
const filterComments = Comments.filter((item) => item.post === IdPost);

в models.py

  class Comment(models.Model):
  """Model For The Comments In The Blog Posts"""

  name = models.CharField(max_length=100)
  body = models.TextField()
  author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE,    related_name='post')
  post = models.ForeignKey(settings.AUTH_POST_MODEL, on_delete=models.CASCADE,    related_name='post')
  published = models.DateTimeField(default=timezone.now)


 class Meta:
     def __str__(self):
        return self.body

serializers.py:

class CommentSerializer(serializers.ModelSerializer):

author = StringRelatedField()

class Meta:
    fields = ('id', 'post', 'published','author', 'body')
    model = Comment

views.py:

class comment_list_view(generics.ListCreateAPIView):
permission_classes = [IsAuthenticatedOrReadOnly]
queryset = Comment.objects.all()
serializer_class = CommentSerializer


class comment_create_view(generics.CreateAPIView):
permission_classes = [permissions.IsAuthenticated]
serializer_class = CommentSerializer

def perform_create(self, serializer):
    serializer.save(author=self.request.user)

Я могу добавить комментарий со страницы администратора "Django administration" Он отображает комментарии для каждого поста отдельно, потому что я выбираю id поста, когда пишу комментарий, но в react я не могу этого сделать Я хочу добавить комментарий на основе SinglePost.

Весь код для ReactJs:

export const SinglePost = () => {

const { slug } = useParams();
const [data, setData] = useState({ posts: [] });

useEffect(() =>  {
axios.get(slug).then((res) => {
setData({ posts: res.data });
console.log('a single post', res.data);
//  author, content, id, image, published, slug, title
});
}, [slug]);


let IdPost = data.posts.id 



const createComment = Object.freeze({
 body: '', 
});

const [postComment, updateComment] = useState(createComment);

const handlerOnChange = (e) => {
   updateComment({
     ...postComment,[e.target.name]: e.target.value 
});
};

const handlerOnSubmit = (event) => { event.preventDefault();

let formComment = new FormData();
formComment.append('body', postComment.body);
axios.post(`http://localhost:8000/comment/create/`, formComment, {
headers: { Authorization: `JWT ${localStorage.getItem('token')}`,
          'Content-Type': 'application/json'
 }
 })
 };


const [Comments, setComments] = useState([]);
   useEffect(() => {
axios.get("http://localhost:8000/comment/list").then((res) => {
const allComments = res.data;
setComments(allComments);
   });
}, [setComments]);
const filterComments = Comments.filter((item) => item.post === IdPost);


  return (
   <Fragment.React>
 <div className="container-fluid">
 <div className="row">
   <div className="col-lg-12">
   <img src={data.posts.image}/>
   <h3> {data.posts.title}</h3>
   <div>{data.posts.content}</div>
   </div>
 </div>

{/* THIS IS COMMENT SECTION */}
<div class="main-comment-section">
    <form  onSubmit={handlerOnSubmit}>
        <textarea name="comments" id="comments" placeholder="comments" onChange =   {handlerOnChange} rows="4" cols="50"></textarea>
        <button name ="button">add Comment</button>
    </form> </div>

 {/* HERE map() Loop to render comments */}
  ......
  ......
  ......
 </div>
 </Fragment.React>
 );
 };

Вернуться на верх