Почему не отображается дочерний элемент React?

Есть универсальная карточка CardSmall

import React from "react";
import {Link} from "react-router-dom";
import './CardSmall.css';

const CardSmall = () => {
    return (
        <div className={"card-small"}>

        </div>
    )
}

export default CardSmall

Еще есть элемент NodeLink, в котором я хочу использовать CardSmall:

import React from "react";
import {Link} from "react-router-dom";
import CardSmall from "../generic/cards/small/CardSmall";

const NodeLink = ({node}) => {
    return (
        <CardSmall>
            <Link to={`/node/${node.id}`}>
                <div>{node.name}</div>
            </Link>
        </CardSmall>
    )
}

export default NodeLink

На самой странице я хочу отобразить несколько элементов NodeLink, в которых содержатся ссылки на другие страницы.

<div className="nodes-list">
     {nodes.map((node, index) =>(
          <NodeLink key={index} node={node} />
      ))}
 </div>

В общем проблема в том, что когда я добавляю SmallCard в NodeLink, то содержимое

<Link to={`/node/${node.id}`}>
    <div>{node.name}</div>
</Link>

не появляется на странице и по факту виден лишь элемент SmallCard (на странице это выглядит как пустая карточка). Без элемента CardSmall ссылки появляются. Как это решить?