API вызова useEffect при ошибках загрузки страницы

Я работаю над проектом, который использует IGDB для отображения информации о различных названиях видеоигр. У меня есть вызов API на странице поиска, который возвращает информацию соответствующим образом. Щелкнув по одному из этих заголовков в поиске, я загружаю новую страницу с подробной информацией об игре. Вызов API для подробной информации точно такой же, как и для функции поиска (за исключением того, что они извлекают разные поля из БД, кроме того, точно такие же), и оба возвращают данные соответствующим образом и в том же формате. (массив объектов.) Однако у меня было много проблем с отображением данных на странице сведений об игре.

Вот ответ, который у меня не получается отобразить:

И, ребята, просто для того, чтобы дать вам как можно больше подробностей, вот успешно отобразившийся ответ со страницы поиска:

Я настроил его так, чтобы запустить хук useEffect при загрузке страницы. Хук запускается, и данные возвращаются, но отображение данных было проблемой. Вот текущий крючок.

    useEffect(() => {

        async function getGameId(gameId) {

            const response = await getSpecificGame(gameId);

            if (!response.ok) {
                throw new Error('Something went wrong...');
            }

            const result = response.json();

            const gameData = result?.map((game) => ({

                gameId: game.id,
                name: game.name,
                cover: game.cover,
                summary: game.summary,
                platforms: game.platforms,
                genres: game.genres,
                
            }));

            setSelectedGame(gameData);
        }

        getGameId(gameId);
        
    }, [])

С этим кодом я получаю следующую ошибку:

Uncaught (in promise) TypeError: result.map is not a function

Поскольку ошибка связана с result.map, я очень не понимаю, куда идти дальше. Я задавался вопросом, возможно, строка response.json() не нужна или неуместна, но поскольку данные возвращаются точно так же, как и для страницы поиска, я не уверен, что мне нужно изменить. Ошибка не возникает в ответе, что означает, что данные возвращаются в порядке, но она выдается в строке result.map(), что означает, что результат = response.json() какой-то неверный/ненужный, или я отсутствует еще одна линия, которая должна быть там. Это меня сильно смущает, поскольку другой вызов API, который я делаю для выполнения поиска, работает и настраивается таким же образом. Для дополнительного контекста я также опубликую правильно функционирующий вызов API со страницы поиска, он находится в обработчике формы:

    const handleFormSubmit = async (event) => {
        event.preventDefault();

        if (!searchInput) {
            return false;
        }

        try {
            

            const response = await getGame(searchInput);

            if (!response.ok) {
                throw new Error('Something went wrong...');
            }

            const result = await response.json();

            const gameData = result.map((game) => ({
                
                gameId: game.id,
                name: game.name,
                cover: game.cover,
            }));

            setSearchedGames(gameData);
            setSearchInput('');
        } catch (err) {
            console.error(err);
        }
    };

Вот вызовы API, которые сопровождают эти функции.

export const getGame = (searchInput) => {
    return fetch(`https://id.twitch.tv/oauth2/token?client_id=************&client_secret=****************&grant_type=client_credentials`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => response.json())
        .then(data => {
            const accessToken = data.access_token;


            return fetch(`https://fathomless-river-46653.herokuapp.com/https://api.igdb.com/v4/games/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Client-ID': '***********',
                    'Authorization': `Bearer ${accessToken}`
                },
                body: `
                search "${searchInput}";
                fields name,cover.url;`
            })
        });
};

export const getSpecificGame = (gameId) => {
    return fetch(`https://id.twitch.tv/oauth2/token?client_id=************&client_secret=**************&grant_type=client_credentials`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => response.json())
        .then(data => {
            const accessToken = data.access_token;


            return fetch(`https://fathomless-river-46653.herokuapp.com/https://api.igdb.com/v4/games/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Client-ID': '**************',
                    'Authorization': `Bearer ${accessToken}`
                },
                body: `
                fields name,summary,platforms.name,genres.name,cover.url;
                where id = ${gameId};`
            })
        });
}

Это кажется простым вопросом надлежащего изменения синтаксиса для работы с useEffect вместо обработчика формы, но это оказывается довольно сложной задачей. Я просмотрел, наверное, 20 тем с похожими проблемами, но ни одна из них не смогла решить мою проблему.

Я задавался вопросом, должен ли я пойти совершенно другим путем, полностью удалив хук useEffect и попробовав что-то другое, но это похоже на возможность узнать, как использовать useEffect, поэтому я изо всех сил стараюсь, чтобы это работало.

Я был бы рад прикрепить любой дополнительный код, чтобы помочь с ответом. Вчера я опубликовал очень похожий вопрос и получил несколько полезных ответов, но с тех пор добился прогресса и достиг еще одного препятствия. Заранее благодарю всех, кто сможет помочь!