Cómo actualizar la página después de obtener los datos en ReactJS.

Soy nuevo en ReactJS y ahora estoy intentando hacer una sección interactiva de comentarios (tomada de frontendmentor.io), pero el componente App simplemente no muestra lo que se supone que debe mostrar.

Este es mi componente App:

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const getComm = async () => {
            await fetchData();
        };

        getComm();
    }, []);
    console.log(data);

    const fetchData = async () => {
        const res = await fetch("db.json").then(async function (response) {
            const comm = await response.json();
            setData(comm);
            return comm;
        });
    };
    return (
        <fragment>
            {data.length > 0 ? <comments data="{data}"></comments> : "No hay comentarios para mostrar"}
        </fragment>
    );
}

export default App;

El console.log(data) se registra dos veces:

• la primera vez es un Array vacío;
• la segunda vez es el Array con mis datos dentro.

Como se muestra a continuación:
aquí

Si fuerzo al componente App a imprimir los Comments, solo dice que no puede iterar a través de una variable indefinida.

Imagen

Este es mi componente Comments:

function Comments({ data }) {
    return (
        <div>
            {data.map((c) => (
                <comment key="{c.id}"></comment>
            ))}
        </div>
    );
}

export default Comments;

Me pregunto por qué la página sigue mostrando “No hay comentarios para mostrar” incluso si el registro es correcto.