카드가 반응형 스타일이 좀 이상하게 됩니다.

ㅋ카드가 모양이 제대로 안나옵니다. antd에서 가져오고 딱히 건든건 없는것같은데 무엇이 문제일까요

import React from "react";
import { List, Button, Card } from "antd";
import { StopOutlined } from "@ant-design/icons";
const FollowList = ({ header, data }) => {
  return (
    <List
      style={{ marginBottom: "20px" }}
      grid={{ gutter: 4, xs: 2, md: 3 }}
      size="small"
      header={<div>{header}</div>}
      loadMore={
        <div style={{ textAlign: "center", margin: "10px 0" }}>
          <Button>더 보기</Button>
        </div>
      }
      bordered
      dataSource={data}
      renderItem={(item) => (
        <List.Item style={{ marginTop: "20px" }}>
          <Card actions={[<StopOutlined key="stop" />]}>
            <Card.Meta description={item.nickname} />
          </Card>
        </List.Item>
      )}
    />
  );
};
export default FollowList;

gutter: 4, xs: 2, md: 3