ReactJs — карта вкладок дизайна Ant не отображает содержимое

Мои компоненты использовали Фреймворк ReactJs, созданный с помощью Муравей дизайн пользовательского интерфейса. Мое застревание - это рендеринг содержимого вкладок.

Я пытаюсь вложить компонент LoginForm в компонент TabsCard.

Примечание: компонент LoginForm может успешно отображаться независимо без вложенности.

Компонент, отображаемый на изображении, которое я прикрепил:

Вот мой код:
TabsCard.js

import React, { useState } from 'react';
import { Card } from 'antd';
import LoginForm from '../LoginForm/index.js';

function TabsCard() {
  const tabList = [
    {
      key: 'tab1',
      tab: 'Sign in'
    },
    {
      key: 'tab2',
      tab: 'Sign up'
    }
  ];

  const contentList = {
    tab1: <LoginForm />,
    tab2: <p>signup</p>,
  };

  const [activeTab, setActiveTab] = useState('tab1');
  const handleTabChange = key => {
    setActiveTab(key);
  };

  return (
    <Card
      style = {{ width: '400' }}
      tabList = {tabList}
      activeTabKey = {activeTab}
      onTabChange = {key => {
        handleTabChange(key);
      }}
    >
      {contentList[setActiveTab]}
    </Card>
  );
}
export default TabsCard;

Спасибо за поддержку!