rendering a thing from the thing

components/Home/helpers/recently-played.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
-import { ScrollView } from "tamagui";
+import { Avatar, ScrollView, Text } from "tamagui";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { useRecentlyPlayed } from "../../../api/queries/recently-played";
+import { Stack } from "tamagui"
 
 export default function RecentlyPlayed(): React.JSX.Element {
 
     const { apiClient, library } = useApiClientContext();
 
-    const { data, isError, refetch } = useRecentlyPlayed(apiClient!, library!.musicLibraryId);
+    const { data } = useRecentlyPlayed(apiClient!, library!.musicLibraryId);
 
     useEffect(() => {
         console.log("Recently played", data);
@@ -17,7 +18,11 @@ export default function RecentlyPlayed(): React.JSX.Element {
 
     return (
         <ScrollView horizontal>
-
+            { data && data.map((recentlyPlayedTrack) => {
+                <Stack>
+                    <Text>{recentlyPlayedTrack.Name}</Text>
+                </Stack>
+            })}
         </ScrollView>
     )
 }