Why is my api data saying fulfilled but returning undefined?

I’m using the GameSpot API in my React Redux web app (set up with Vite). I’m seeing undefined data in my components, although Redux DevTools shows each query state as fulfilled with data visible there.

I’ve set up useEffect in App.jsx to merge fields from three endpoints each returning different data unique to that endpoint:

• games (genres, release date)

• reviews (scores)

• releases (platforms, publishers, developers).

Here’s my setup:

App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { useEffect } from 'react'
import './App.css'
import { setGames } from './features/Games/gamesSlice'
import { useGetGamesQuery, useGetReviewsQuery, useGetReleasesQuery } from './api/gamespotApiSlice'
import { Header } from './features/Header/Header'
import { GamesList } from './features/Games/GamesList/GamesList'
import { GameDetails } from './features/Games/GameDetails/GameDetails'

function App () {
  const dispatch = useDispatch();
  const { data: gamesData } = useGetGamesQuery();
  const { data: reviewsData } = useGetReviewsQuery();
  const { data: releasesData } = useGetReleasesQuery();
  useEffect(() => {
    if (gamesData && reviewsData && releasesData) {
      const mergedData = gamesData.results.map(game => {
        const review = reviewsData.results.find(review => review.game.id === game.id);
        const release = releasesData.results.find(release => release.game_api_url.includes(game.name));
        const publisher = release && release.publishers.length > 0 ? release.publishers[0] : "Unknown";
        const developer = release && release.developers.length > 0 ? release.developers[0] : "Unknown";
        return {
            ...game,
            id: game.id,
            name: game.name,
            cover: game.image,
            platform: release ? release.platform : null,
            genres: game.genres || [],
            release_year: new Date(release ? release.release_date : null).getFullYear(),
            score: review ? review.score : null,
            publisher,
            developer
        };
      });
      const sortedGames = [...mergedData].sort((a, b) => b.score - a.score);
      dispatch(setGames(sortedGames));
    }
  }, [dispatch, gamesData, reviewsData, releasesData]);
  return (
    <Router>
      <Header />
      <main>
        <section className='game-view'>
          <Routes>
            <Route path='/games/:id' element={<GameDetails />} />
            <Route path='/' element={<GamesList />} />
          </Routes>
        </section>
      </main>
    </Router>
  );
}

export default App;

gamespotApiSlice.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const API_KEY = '?api_key='+ import.meta.VITE_GAMESPOT_API_KEY;
const jsonFormat = '&format=json';

export const gamespotApi = createApi({
    reducerPath: 'gamespotApi',
    baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
    endpoints: (builder) => ({
        getGames: builder.query({
            query: () => `games/${API_KEY}${jsonFormat}`,
        }),
        getReviews: builder.query({
            query: () => `reviews/${API_KEY}${jsonFormat}&sort=score:desc`,
        }),
        getReleases: builder.query({
            query: () => `releases/${API_KEY}${jsonFormat}`,
        })
    })
})

export const {
    useGetGamesQuery,
    useGetReviewsQuery,
    useGetReleasesQuery
} = gamespotApi;

export default gamespotApi.reducer;

I’ve also tried simpler approaches (e.g., displaying setGames directly within useEffect without merging & filtering fields in the endpoint queries), but I still see undefined in components. Any advice on handling this data across endpoints or troubleshooting undefined data would be appreciated!