in this project i just in the first step that when I choose article from the list of all articles i don’t get it the comments from the API as well and it render me this kind of default in the console “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘push’)” an d in the same time it give me these information about the API “index.compiled.js:898 [MSW] Mocking enabled. index.compiled.js:3038 [MSW] 10:35:35 GET /api/articles (200) index.compiled.js:3038 [MSW] 10:35:37 GET /api/articles/1 (200) index.compiled.js:3038 [MSW] 10:35:38 GET /api/articles/1/comments (200)” as you see the API is fulfilled but i didn’t know why isn’t render in the Comments component so there is my code:

the Comments.js:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  loadCommentsForArticleId,
  selectComments,
  isLoadingComments,
} from '../comments/commentsSlice';
import { selectCurrentArticle } from '../currentArticle/currentArticleSlice';
import CommentList from '../../components/CommentList';
import CommentForm from '../../components/CommentForm';

const Comments = () => {
  const dispatch = useDispatch();
  const article = useSelector(selectCurrentArticle);
  // Declare additional selected data here.
  const comments = selectComments;
  const commentsAreLoading = isLoadingComments;
  let commentsForArticleId = [];
  if(!article){
    commentsForArticleId = []
  }else {
    commentsForArticleId = comments[article.id];
  }
  // Dispatch loadCommentsForArticleId with useEffect here.
  useEffect(()=> {
    if(article !== undefined) {
    dispatch(loadCommentsForArticleId(article.id))
    }
  }, [dispatch, article])

  if (commentsAreLoading) return <div>Loading Comments</div>;
  if (!article) return null;

  return (
    <div className='comments-container'>
      <h3 className='comments-title'>Comments</h3>
      <CommentList comments={comments} />
      <CommentForm articleId={article.id} />
    </div>
  );
};

export default Comments;