Запрос API не получает токен доступа после обновления страницы в React

Я делаю приложение React, используя API Pet-finder. Я храню свой токен доступа внутри контекста. Когда я отображаю конкретную страницу с животными, она отображается нормально (в большинстве случаев, если предположить, что из-за той же проблемы), но когда я обновляю страницу, она выдает ошибку axios с status: 401, для которой в документах API указано Access was denied due to invalid credentials. Когда я проверяю заголовки, он содержит Authorization: "undefined undefined", где должен быть тип токена и сам токен.

Частичное исправление, которое я нашел, заключается в добавлении token к массиву зависимостей useEffect, который я использую для выполнения запроса, но ошибка по-прежнему появляется в консоли при обновлении, и данные загружаются сразу после этого. Кроме того, это единственная страница, на которой я делаю запрос сразу после рендеринга (возможно, это как-то связано с проблемой).

TokenContext.jsx

const TokenContext = createContext();

export const TokenProvider = ({ children }) => {
  const [token, setToken] = useState({});
  let location = useLocation();

  const fetchToken = async () => {
    await axios
      .get("http://localhost:3001/fetchToken")
      .then((res) => {
        const newToken = {
          token: res.data.access_token,
          tokenType: res.data.token_type,
          expires: new Date().getTime() + res.data.expires_in * 1000,
        };

        localStorage.setItem("token", JSON.stringify(newToken));
      })
      .catch((error) => {
        console.info(error);
      });
  };

  useEffect(() => {
    const foundToken = JSON.parse(localStorage.getItem("token"));

    if (!foundToken || token.expires - new Date().getTime() < 10) {
      fetchToken();
    } else {
      setToken(foundToken);
    }
  }, [location.pathname]);

  return (
    <TokenContext.Provider value = {{ token }}>{children}</TokenContext.Provider>
  );
};

export default TokenContext;

Pet.jsx

const Pet = () => {
  const { id } = useParams();
  const { token } = useContext(TokenContext);
  const [isLoading, setIsLoading] = useState(false);
  const [pet, setPet] = useState({});

  useEffect(() => {
    setIsLoading(true);

    petFinderApi
      .get(`/animals/${id}`, {
        headers: {
          Authorization: `${token.tokenType} ${token.token}`,
        },
      })
      .then((res) => {
        setPet(res.data.animal);
        setIsLoading(false);
      })
      .catch((error) => {
        console.info(error);
      });
  }, [token]);

  if (!pet) {
    return (
      isLoading ?? (
        //Spinner renders here
      )
    );
  } else {
    return (
//Stuff will render here
)
  }
};

export default Pet;