React Not Rendering Fetched Posts from API Using React Query

I'm developing a React application that fetches posts (tweets) from an API using React Query, but I'm having trouble rendering the data after it's fetched.

Setup Overview:

• I'm using React with React Query to manage data fetching.
• The API successfully returns a list of tweets, which I can confirm by checking the console output.
• Despite the data being fetched correctly, the posts state does not render in my component.

Code Snippet:

Here’s a simplified version of my component:

const Posts = ({ feedType, username, userId, currentUserId }) => {
const [posts, setPosts] = useState([]);
const navigate = useNavigate();

const getPostEndpoint = () => {
    // Logic to determine the endpoint based on feedType
};

const { isLoading, refetch, isRefetching, error } = useQuery({
    queryKey: ["posts", feedType, username, userId],
    queryFn: async () => {
        const token = localStorage.getItem('token');
        if (!token) {
            navigate('/');
            return [];
        }

        const response = await fetch(getPostEndpoint(), {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json',
            }
        });

        if (!response.ok) throw new Error('Failed to fetch posts');
        const parsedData = await response.json();
        return parsedData.tweet_feed || [];
    },
    onSuccess: (data) => {
        setPosts(data);
    },
    enabled: !!username && !!localStorage.getItem('token'),
});

// Render logic
return (
    <>
        {(isLoading || isRefetching) && <PostSkeleton />}
        {!isLoading && !isRefetching && posts.length === 0 && <p>No posts in this tab.</p>}
        {!isLoading && !isRefetching && posts.length > 0 && (
            <div>
                {posts.map((post) => (
                    <Post key={post.id} post={post} currentUserId={currentUserId} />
                ))}
            </div>
        )}
        {error && <div>Error fetching posts: {error.message}</div>}
    </>
);

};

API Response:

I confirmed that the API is working as expected. Here's an example response from the /api/explore/ endpoint:

{
"tweets": [
    {
        "id": 2,
        "content": "amir",
        "creation_date": "2024-09-13"
    },
    {
        "id": 1,
        "content": "Hello!",
        "creation_date": "2024-09-13"
    }
]

}

Backend View (views.py): Here’s the relevant part of my Django backend that handles the request:

class GetTweetFeedView(viewsets.ViewSet):
permission_classes = [IsAuthenticated]

def list(self, request):
    profile = get_object_or_404(BasicUserProfile, user=request.user)
    followings = Follower.objects.filter(follower=profile)
    following_ids = [following.following.id for following in followings]
    tweets = Tweet.objects.filter(user_id__in=following_ids).order_by("-id")
    
    response_data = [
        {
            'id': tweet.id,
            'content': tweet.content,
            'creation_date': tweet.creation_date.strftime('%Y-%m-%d %H:%M:%S'),
            # Additional fields...
        }
        for tweet in tweets
    ]

    return Response({'tweet_feed': response_data}, status=200)

Console Output: In the console, I can see the fetched data logged correctly:

Fetched data: 
Object { tweets: (2) [...] }

Issues Encountered:

1. Posts State Not Rendering: Despite seeing that the posts state is being set, the component does not render the posts.
2. Empty Array: The posts state shows as an empty array when the component first renders, even though the API responds with data.

Questions:

1. Why might the posts state not be rendering even though the data is fetched correctly?
2. Is there anything in my use of React Query that could be causing this issue?
3. Could there be an issue with how I'm accessing the data returned from the API?

Any help or insights would be greatly appreciated!