Los datos obtenidos de Firebase utilizando useSWR devuelven indefinido.

Estoy siguiendo un curso donde obtengo datos de Firebase usando useSWR y los uso para establecer el estado. Sin embargo, cuando intento hacer un console log de los datos, obtengo “undefined” y la pantalla muestra “loading”. ¿Hay alguna razón para esto? Incluso copié el mismo código que el instructor usa (excepto el enlace de la API).

import { useEffect, useState } from 'react';
import useSWR from 'swr';

function LastSalesPage() {
  const [sales, setSales] = useState();
  // const [isLoading, setIsLoading] = useState(false);

const { data, error } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json'
  );

console.log('Data:', data);

useEffect(() => {
    if (data) {
      const transformedSales = [];

  for (const key in data) {
    transformedSales.push({
      id: key,
      username: data[key].username,
      volume: data[key].volume,
    });
  }

  setSales(transformedSales);
}


}, [data]);

if (error) {
    return <p>Error al cargar.</p>;
  }

if (!data || !sales) {
    return <p>Cargando...</p>;
  }

return (
    <ul>
      {sales.map((sale) => (
        <li key="{sale.id}">
          {sale.username} - ${sale.volume}
        </li>
      ))}
    </ul>
  );
}

export default LastSalesPage;