Table ant design two renders

Question

When I do render in columns why does it run twice? I have four items and I need one render, why do I get two?

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { Modal, Select, Table } from 'antd'

const { Option } = Select
import { Button } from 'antd/lib/radio'

const data1 = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No.1 Lake Park',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No.1 Lake Park',
  },
  {
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: { name: 'Sidney No.1 Lake Park', tata: 'vava' },
  },
  {
    key: 4,
    name: 'Jim Red',
    age: 18,
    address: 'London No.1 Lake Park',
  },
]

export const ModalMore = ({ handleOk, handleCancel, show }: any): JSX.Element => {
  const [data, dataSet] = useState(data1)
  const columns = [
    // ...arr,
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    {
      title: 'Address',
      key: 'address',
    },
    {
      title: 'Action',
      dataIndex: '',
      key: 'x',
      render: (text, record) => {
        console.log(33) // two renders why ??????????????????
        return (
          <span
            onClick={(e) => {
              onDelete(record.key, e)
            }}
          >
            Delete
          </span>
        )
      },
    },
  ]

  const onDelete = (key, e) => {
    // e.preventDefault();
    // const data = this.state.data.filter(item => item.key !== key);
    // this.setState({ data, isPageTween: false });
  }

  return (
    <ModalMoreWrapper>
        <Table columns={columns} pagination={{ pageSize: 4 }} dataSource={data} />
    </ModalMoreWrapper>
  )
}

export const ModalMoreWrapper = styled.div