Su código tiene algunos errores:

1. No necesita / no puede usar la palabra clave asíncrona en la devolución de llamada useEffect, solo declare la función y llámela.
2. El problema principal, su mapa nunca devuelve nada. si usa llaves, debe usar la palabra clave de retorno para regresar
3. No es tan importante, pero si inicializa cardData en nulo, puede verificar si es verdadero antes de mapearlo.
4. En cuanto a por qué no aparece nada en la consola, setState es asíncrono/una solicitud para actualizar el estado para el próximo procesamiento, por lo tanto, los cambios de estado no se pueden observar de inmediato

El siguiente código funciona en el espacio aislado de código. Avísame si tienes alguna pregunta.

 export default function HomePage() { { const [isFlipped, setIsFlipped] = useState(false); const [cardData, setCardData] = useState(null); // useEffect function useEffect(() => { //removed async here const url = "https://rickandmortyapi.com/api/character"; const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); const jsonData = json.results; setCardData(jsonData); console.log(jsonData); } catch (error) { console.log("error", error); } }; fetchData(); }, []); const handleClick = () => { setIsFlipped(!isFlipped); }; return ( <> {cardData && cardData.map((c) => { return <h1>{c.id}</h1>; //note here: return keyword })} </> ); }