TypeError: невозможно прочитать карту свойств undefined React.Js после перехода с 1 компонента на 2 родительских дочерних компонента

У меня был компонент, который извлекал и отображал данные из API, и он работал. Но для какой-то функции мне пришлось преобразовать этот компонент в 2 отдельных компонента (родительский и дочерний). Поскольку при этом не работает «TypeError: Cannot read property« map »of undefined», я получаю эту ошибку. Мне нужно, чтобы он работал только так (родительская, дочерняя структура). Как я могу это сделать ?

Вот родительский компонент: -

import React, { useEffect, useState } from "react";
import axios from "axios";
import PostListItem from "./PostListItem";

const PostList = () => {
  useEffect(() => {
    getPost();
  }, []);

  const [posts, setPosts] = useState([]);

  const getPost = async () => {
    const res = await axios.get("http://localhost:5000/posts/");
    setPosts(res.data);
  };

  const renderList = () => {
    return posts.map((post) => {
      return <PostListItem post = {post} />;
    });
  };

  return <div>{renderList()}</div>;
};

export default PostList;

Вот дочерний элемент: -

    import React from "react";
    
    const PostListComponent = (post) => {
      const renderDate = (dateString) => {
        const monthNames = [
          "January",
          "February",
          "March",
          .
.
.
.
        ];
        const date = new Date(dateString);
        return `${
          monthNames[date.getMonth()]
        } ${date.getDate()}, ${date.getFullYear()}`;
      };
    
      const renderTags = (tags) => {
        return tags.map((tag, index) => {
          index = index + 1;
          return <span key = {index}>{tag}</span>;
        });
      };
      return (
        <button key = {post._id}>
          <h3>{post.title}</h3>
          <span>{renderDate(post.createdAt)}</span>
          <div>{renderTags(post.tags)}</div>
        </button>
      );
    };
    
    export default PostListComponent;

Вот ошибка: -

TypeError: Cannot read property 'map' of undefined
  25 | const renderTags = (tags) => {
  26 |   return tags.map((tag, index) => {
  27 |     index = index + 1;
> 28 |     return <span key = {index}>{tag}</span>;
     | ^  29 |   });
  30 | };