Why does my API data disappear if I refresh the page?

Question

With this code everything works properly, my data is displayed in a li list, but when I refresh the page, it does not show on my browser anymore. Can anyone tell me why? And how I should fix it?

Thank you, below is my code with React.

const HomeFeed = () => {
        const [posts, setPosts] = useState();
        const [albums, setAlbums] = useState();
        const [photos, setPhotos] = useState();
        const [homeStatus, setHomeStatus] = useState("loading");
        
        useEffect(() => {
        const allApiFetch = () => {
        const FetchPosts = fetch("https://jsonplaceholder.typicode.com/posts");
        const FetchAlbums = fetch("https://jsonplaceholder.typicode.com/albums");
        const FetchPhotos = fetch("https://jsonplaceholder.typicode.com/photos");
    
        Promise.all([FetchPosts, FetchAlbums, FetchPhotos])
          .then((values) => {
            return Promise.all(values.map((r) => r.json()));
          })
          .then(([Posts, Albums, Photos]) => {
            setPosts(Posts);
            setAlbums(Albums);
            setPhotos(Photos);
          })
          .catch((e) => {
            console.log("Caught! Err...", e);
          });
      };
      }, []);
     return (
        <>
          <Header />
          <div>
                  <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
                
          </div>
        </>
      );
    };