useOptimistic 실전-1 useState

import axios from "axios";
import { Heart } from "lucide-react";
import { useEffect, useState, useTransition } from "react";

interface Posts {
  id: number;
  isLike: boolean;
}

export default function App() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    startTransition(async () => {
      const { data } = await axios.get("http://localhost:3000/posts");
      setPosts(data);
    });
  }, []);

  if (isPending) return <h3>loading..</h3>;

  return (
    <>
      {/* fill: 'none', stroke: 'currentColor' */}
      {/* fill: 'rgb(255,0,0)', stroke: 'rgb(255,0,0)' */}

      {posts.map((post) => {
        <Heart
          key={post.id}
          fill={post.isLike ? "rgb(255,0,0)" : "none"}
          stroke={post.isLike ? "rgb(255,0,0)" : "currentColor"}
        />;
      })}
    </>
  );
}

posts에 값이 설정되지 않는데요. 이런 경우가 처음이라 다른 예제는 이런 적이 없었습니다.

몇 시간에 해보는데 뭐가 잘못되었는지 잘 모르겠네요.