Resolved: ReactJS – Trying to access the title of an object I’m pulling from a webpage online, but getting these errors

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

function LatestArticles() {
  const [posts, setPosts] = useState(React.useState("waiting..."));

  function ArticleGrabber() {
    useEffect(() => {
      fetch("URL")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data);
          console.log(data);
        })
        .catch((error) =>
          console.log("Authorization failed: " + error.message)
        );
    }, []);
  }

  ArticleGrabber();

  return (
    <div>
      <h3>Latest Articles</h3>
      {posts.map((post, index) => (
        <ul>
          <Article key={index} post={post} />
        </ul>
      ))}
    </div>
  );
}

export default LatestArticles;

import React from "react";
import "../Article.css";

function Article(post) {
  return (
    <div className="theArticle">
      <h3>{post.post.title.rendered}</h3>
      <a href={post.post.link}>Article content</a>
    </div>
  );
}

export default Article;

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