Почему я получаю ошибку InvalidCredentials от Marvel API?

Question

Я создаю простое приложение с помощью create-реагировать на приложение и Marvel to Marvel API.Приложению нужно только показать список символов.Я впервые пытаюсь это сделать, поэтому я не очень знаком с файлами среды.

У меня есть файл .env в /src, в котором содержатся эти две клавиши и ничего больше:

REACT_APP_PUBLIC_KEY='publicKey' REACT_APP_PRIVATE_KEY='privateKey'

Также в /src у меня /config/config.js.config.js затем импортируется в App.js.config.js выглядит так:

const marvelURL = 'https://gateway.marvel.com/v1/public/',
      apiKey = `apikey=${process.env.REACT_APP_PUBLIC_API_KEY}`;

const getCharacters = (options) => {
const {
    offset,
    name,
    exactMatch,
    sortName,
    limit,
} = Object.assign({
    offset: 0,
    name: '',
    exactMatch: false,
    limit: 20,
}, options);

let url = `${marvelURL}characters?${apiKey}&offset=${offset}&orderBy=${sortName}name&limit=${limit}`;

if (name) {
    if (exactMatch) {
        url += `&name=${name}`;
    } else {
        url += `&nameStartsWith=${name}`;
    }
}

return fetch(url)
.then(res => res.json())
.then((resObj) => {
    try {
        if (resObj.code === 200) {
            if (offset > resObj.data.total) {
                throw new Error('This page does not exist.');
            } else {
                const pages = Math.floor(resObj.data.total / limit);
                return {
                    characters: resObj.data.results,
                    maxPage: resObj.data.total % limit > 0 ? pages + 1 : pages,
                };
            }
        } else {
            throw new Error(`Bad response from API. Status code ${resObj.code}.`);
        }
    } catch (e) {
        console.error(e);
        return {
            characters: [],
            maxPage: 0,
        };
    }
});
}

export { getCharacters };