[Projeto] Problema ao carregar dados de uma requisição GraphQL em um componente React + Astro

Estou enfrentando dificuldades ao tentar carregar dados de uma requisição GraphQL em um componente React usando Astro. A função fetchProducts parece estar retornando os dados corretos quando testada isoladamente, mas quando tento usar esses dados no componente Header, eles nunca são populados e a mensagem "Loading..." nunca sai da tela.

Aqui está a estrutura do meu código:

// src/utils/graphql.js

const fetchProducts = async () => {
  try {
    const response = await fetch("https://graphql.datocms.com/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
      },
      body: JSON.stringify({
        query: `query {
          allProducts {
            title
            description
          }
        }`,
      }),
    });

    const json = await response.json();
    const data = json.data.allProducts;
    return data;
  } catch (error) {
    console.error("Error fetching products:", error);
    return [];
  }
};

export default fetchProducts;

// src/components/Header.jsx

import React, { useState, useEffect } from "react";
import fetchProducts from "../../utils/graphql";

export const Header = () => {
  const [headerData, setHeaderData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const products = await fetchProducts();
        setHeaderData(products);
      } catch (error) {
        console.error("Error fetching header data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      <header>
        {headerData.length > 0 ? (
          headerData.map((product, index) => (
            <div key={index}>
              <p>Title: {product.title}</p>
              <p>Description: {product.description}</p>
            </div>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </header>
    </>
  );
};

export default Header;

Resultado na tela: Link do repositório: https://github.com/kellysondias/morpheus

Já verifiquei a importação de fetchProducts e não encontrei erros. Além disso, adicionei logs de depuração e percebi que a função fetchData é chamada, mas headerData nunca é populado com os dados retornados pela função fetchProducts.

Alguém tem alguma sugestão de como posso resolver esse problema? Agradeço antecipadamente pela ajuda!