.map is not getting re-rendered after updating the state

Question

I have fetched data using useEffect, and also getting the data on console. I've called the setState method to update the state, but the .map function is not working. Even on the console nothing is happening.

 import React, { useState, useEffect } from "react";


function HomePage() {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState([]);

  // useEffect function
  useEffect(async () => {
    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.map((c) => {
        <h1>{c.id}</h1>;
      })}
     
    </>
  );
}

export default HomePage;