Showing categories using Wordpress wp-json in ReactJS

Question

I wanted to know what I'm doing wrong, to extract the first category from the Wordpress api.

I have a list of posts, and I just need to show the category, no link or anything.

With the code below it is bringing me an empty value.

export default function Blog({ posts }) {
  const { status } = useSession();

  if (status === 'loading') return <Loading />;

  const getCategories = async (id) => {
    const response = await axios.get(`${process.env.API_CONTENT}/categories/${id}`);
    const category = response.data;
    return category;
  };

  return (
    <BlogPosts>
      <Container className="default">
        {posts.map((post, i) => (
          <Post key={i}>
            <Row>
              <Col className="post-image" md={6}>
                <PostImage>
                  <Link href={`/blog/${post.id}`}>
                    <a title={post.title.rendered}>
                      <img className="image" src={post._embedded['wp:featuredmedia']['0'].source_url} />
                    </a>
                  </Link>
                </PostImage>
              </Col>

              <Col className="post-container" md={6}>
                <PostContent>
                  <Link href={`/blog/${post.id}`}>
                    <a title={post.title.rendered}>
                      <h2 className="title">{post.title.rendered}</h2>
                    </a>
                  </Link>

                  <PostDetails date={post.modified} category={getCategories(post.categories[0])} />

                  <div className="excerpt" dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />

                  <Link href={`/blog/${post.id}`}>
                    <a className="link" title={post.title.rendered}>
                      LEIA MAIS +
                    </a>
                  </Link>
                </PostContent>
              </Col>
            </Row>
          </Post>
        ))}
      </Container>
    </BlogPosts>
  );
}