ReactでWordPressサイトから投稿した記事情報を取得

したいこと

ReactでWordPressサイトから投稿した記事情報を取得し、カテゴリでフィルター表示する

参考サイト

WordPressの一部にReactを取り入れる
https://qiita.com/niyu1103/items/039239c32396b63be2bf

手順

プロジェクトディレクトリにて下記を実行

yarn add axios

▼App.js

import { useEffect, useState, useCallback } from "react";
import './App.css';
import axios from "axios";

export const App = () => {
  const [posts, setPosts] = useState([]);
  const [tags, setTags] = useState([]);
  const [filteredPosts, setFilteredPosts] = useState([]);
  
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const POSTS_URL = "https://internet.mints.ne.jp/wp/wp-json/wp/v2/posts?per_page=100";
    axios.get(POSTS_URL).then((res) => {
      setPosts(res.data);
      setIsLoading(false);
    });

    const TAGS_URL = "https://internet.mints.ne.jp/wp/wp-json/wp/v2/categories";
    axios.get(TAGS_URL).then((res) => {
      setTags(res.data);
    });


    Promise.all([axios.get(POSTS_URL), axios.get(TAGS_URL)]).then(
      ([postsResponse, tagsResponse]) => {
        setPosts(postsResponse.data);
        setTags(tagsResponse.data);
        setIsLoading(false);
      }
    );
  }, []);

  const handleFiler = useCallback(
    (id) => {
      setFilteredPosts(posts.filter((post) => post.tags.includes(id)));
    },
    [posts]
  );

  return (
    <>
    <div>
    {isLoading ? null : (
        <div className="">
           <ul className="tag-list">
    {tags.map((tag, i) => (
        <li
            key={i}
            className="tag-item"
            onClick={() => handleFiler(tag.id)} // clickしてidが取得できるように追記
        >
            {tag.name}
        </li>
    ))}
</ul>
<ul className="post-list">
    {filteredPosts.map((post, i) => (
        <li key={i} className="post-item">
            <a href={post.link} className="post-link">
                {post.title.rendered}
            </a>
        </li>
    ))}
</ul>
        </div>
      )}
    </div>
    </>
  );
};

export default App;

カテゴリーをクリックしても記事が表示されない問題が発生