[Duvida] Cards não renderizaram

E pra fechar, aqui estão os códigos.

index.jsx do Card:

import Like from "./assets/code.svg";
import Share from "./assets/share.svg";
import Chat from "./assets/chat.svg";
import styled from "styled-components";
import PropTypes from 'prop-types';

const ContainerCard = styled.article`
 //codigo omitido
`;

const CardImg = styled.div`
//codigo omitido
`;

const CardTxt = styled.div`
//codigo omitido
`;

const CardTxtConteudo = styled.div`
//codigo omitido
`;

const CardLink = styled.div`
//codigo omitido
`;

const CardUser = styled.div`
//codigo omitido
`;

function Card({
  capa, 
  titulo, 
  resumo, 
  linhasDeCodigo, 
  compartilhamentos, 
  comentarios, 
  usuario }) {
  return (
    <ContainerCard>
      <CardImg>
        <img src={capa} alt="Imagem do post" />
      </CardImg>
      <CardTxt>
        <CardTxtConteudo>
          <h3>{titulo}</h3>
          <p>
            {resumo}
          </p>
        </CardTxtConteudo>
      </CardTxt>
      <CardLink>
        <ul>
          <li>
            <img src={Like} alt="Icone de like" />
            {linhasDeCodigo}
          </li>
          <li>
            <img src={Share} alt="Icone de compartilhar" />
            {compartilhamentos}
          </li>
          <li>
            <img src={Chat} alt="Icone de chat" />
            {comentarios}
          </li>
        </ul>
        <CardUser>
          <img src={usuario.imagem} alt="Icone do usuário" />
          {usuario.nome}
        </CardUser>
      </CardLink>
    </ContainerCard>
  );
}

Card.propTypes = {
  id: PropTypes.any,
  capa: PropTypes.any,
  titulo: PropTypes.any,
  resumo: PropTypes.any,
  linhasDeCodigo: PropTypes.any,
  compartilhamentos: PropTypes.any,
  comentarios: PropTypes.any,
  usuario: PropTypes.any
}

export default Card;

App.jsx

import { useEffect, useState } from "react";
import "./App.css";
import BarraPesquisa from "./components/BarraPesquisa";
import Card from "./components/Card";
import Filtros from "./components/Filtros";
import Ordenacao from "./components/Ordenacao";
import Sidebar from "./components/Sidebar";

import styled from "styled-components";

const Container = styled.div`
//codigo omitido
`;

const ListaCards = styled.ul`
//codigo omitido
`;

function App() {

  const [dados, setDados] = useState([]);
  useEffect(() => {
    fetch('https://my-json-server.typicode.com/MonicaHillman/codeconnect-api/publicacoes')
      .then(resposta => resposta.json())
      .then(dados => setDados(dados))
  }, [])

  return (
    <Container>
      <Sidebar />
      <div>
        <BarraPesquisa />
        <Filtros />
        <Ordenacao />
        <ListaCards>
          {dados ? dados.map((item, index) => {
            <li key={index}>
              <Card 
                id={item.id}
                capa={item.imagem_capa}
                titulo={item.titulo}
                resumo={item.resumo}
                linhasDeCodigo={item.linhas_de_codigo}
                compartilhamentos={item.compartilhamentos}
                comentarios={item.comentarios}
                usuario={item.usuario}
              />
            </li>
          }) : null}
        </ListaCards>
      </div>
    </Container>
  );
}

export default App;

Melhor do que mandar o código assim é melhor mandar no github

No começo da mensagem tem o link do Google Drive sobre o Codeconnect, não mandei o do Github