Sửa thành table của ant.design

e có đoạn code như này, giờ e muốn table kia thành table của ant.design có phân trang từ api như ở dưới thì làm thế nào ạ. e cảm ơn

import React,{useState,useEffect} from 'react';
import {setUserToCustomer} from '../../../api-services/user-services';
import {listGroupUser} from '../../../api-services/sales-acc-management-services';
import {getUserSession} from '../../../utils/user-func';
import { Button,message,Popconfirm,Icon } from 'antd';
import { withRouter } from 'react-router';
import querystringify from 'querystringify';
import Pagination from '../../Pagination';

function ShowAdmin (props) {
    const user = getUserSession();
    const [showAdmin,setShowAdmin] = useState([]);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [totalPage,setTotalPage] = useState(1);


    useEffect(()=>{
        async function fetchData(){
          const query = querystringify.parse(props.location.search);
          const _page = query.page;
          const _page_size = query.page_size;
          const response = await listGroupUser({
            group_name: "admin",
            page: _page,
            page_size:_page_size
          });
          setShowAdmin(response.data);
          setPage(response.paging.page)
          setPageSize(response.paging.page_size)
          setTotalPage(response.paging.totalPage);
        }
        fetchData()
    },[props.location]);


    const confirm = async(id) => {
      try {
        await setUserToCustomer(id);
        message.success('Change user to Customer Success');
        props.history.go(0);
      } catch (error) {
        throw error
      }
    }
    return <React.Fragment>
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Role Change</th>
          </tr>
        </thead>
        <tbody>
        {(props.dataSearchAdmin !== null ? props.dataSearchAdmin : showAdmin).map((dt,index)=>{
          return <tr key={index}>
            <td>{dt.first_name !== null ? dt.last_name +' '+dt.first_name : dt.last_name}</td>
            <td>{dt.email}</td>
            <td>{dt.phone_number}</td>
            <td>{dt.id === user.user_id ? '' : 
              <Popconfirm 
                  placement="left" 
                  title="Are you sure change this user to Customer ?"
                  icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
                  onConfirm={()=>confirm(dt.id)} 
                  okText="Yes" 
                  cancelText="No"
              >
                <Button>Change to customer</Button>
              </Popconfirm>}
            </td>
          </tr>
          })}
        </tbody>
      </table>
      <Pagination
            page={page}
            pageSize={pageSize}
            totalPage={totalPage}
        />
    </React.Fragment>
}
export default withRouter(ShowAdmin);