Modify Pagination in table using Ant Design

Question

Hello, I’m new to React and researching a little bit about some React UI, I found Ant Design. I followed the example of the site using the Table component, but the pagination is not the same as the one on the site. I searched some sites and even here in stackoverflow, however I found nothing.

my component:

import React, { useEffect, useState } from 'react'
import "../../assets/styles/pages/schedule-list.css";
import ScheduleService from '../../services/schedule';
import { Table } from 'antd';

import {
  USDateFormatter,
  Message,
  CellNumberFormatter,
  TimeFormatter,
  VerifyScheduleFields,
  NameFormatter,
} from '../../assets/functions';
import { Schedule } from '../../models';

const columns = [

  {
    title: 'Prontuário',
    dataIndex: ['paciente', 'prontuario'],
    key: 'Prontuário',
    align: 'center' as 'center'

  },
  {
    title: 'Nome',
    dataIndex: ['paciente', 'nome'],
    key: 'Nome',
    align: 'center' as 'center'
  },
  {
    title: 'Hora',
    dataIndex: 'hora',
    key: 'Hora',
    align: 'center' as 'center'
  },
  {
    title: 'Idade',
    dataIndex: ['paciente', 'idade'],
    key: 'Idade',
    align: 'center' as 'center'
  },
  {
    title: 'Celular',
    dataIndex: ['paciente', 'celular'],
    key: 'Celular',
    align: 'center' as 'center'
  },

  {
    title: 'Primeira Vez',
    dataIndex: 'primeiraVez',
    key: 'PrimeiraVez',
    align: 'center' as 'center'
  },

  {
    title: 'Observação',
    dataIndex: 'observacao',
    key: 'Observacao',
    align: 'center' as 'center'
  },
]


const ScheduleList = () => {


  const [schedule, setSchedule] = useState([]);
  const [date, setDate] = useState(new Date());

  const getSchedule = async () => {
    try {
      const response = await ScheduleService.GetByDate(USDateFormatter(date));
      setSchedule(response.data.map((scheduling: Schedule) => {
        return {
          ...scheduling,
          hora: TimeFormatter(scheduling.hora),
          primeiraVez: VerifyScheduleFields(scheduling.primeiraVez),
          paciente: {
            ...scheduling.paciente,
            nome: NameFormatter(scheduling.paciente.nome),
            celular: CellNumberFormatter(scheduling.paciente.celular),

          }

        }
      }));

    } catch {
      Message('Erro ao buscar a agenda', 1);
    }
  }

  useEffect(() => {
    getSchedule()
  }, [])



  return (
    <main>

      <div className="table">

        <Table
          dataSource={schedule}
          columns={columns}
          rowKey={"id"}
          size="small"
          pagination={{
            defaultPageSize: 5,
            showSizeChanger: true,
            pageSizeOptions: ['5', '10', '30'],

          }}
        />


      </div>

    </main>
  )
}

export default ScheduleList

css of the component:

main{
      justify-content: center;
      align-items: center;
      display:flex;
      flex-direction: column;
      height: 90vh;
      width: 100vw;
    }

    .table{
      width: 95vw;
      background-color: #fff;   
    }

He gets like this at the end:

The pagination is all squeezed. I tried to change position, but nothing happened