mdbreact показывает неожиданное поведение

Question

Я использую пакет mdbreact, чтобы создать таблицу для моих данных. В последнем столбце есть кнопка действия, которая открывает модальное окно для редактирования данных. Сценарий:

1. Я загрузил таблицу с начальными данными
2. , а затем применил к ней некоторую сортировку
3. И теперь я нажимаю на кнопку редактирования, чтобы открыть модал для редактирование данных
4. Теперь сортировка автоматически удаляется, и выглядит очень странно, что модальное открытие и данные изменяются в фоновом режиме.

Что мне нужно?

Я не хочу, чтобы данные изменялись на сервере. Кроме того, я не знаю, как сохранить эти отсортированные данные в состоянии, даже когда я использую mdbreact в первый раз.

Здесь вы можете проверить точную проблему, я Facing.

Файл, в котором я форматирую данные и добавляю событие и действие в каждую строку:

import React from 'react'
import PayRatesTable from './PayRatesTable'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPencilAlt, faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons'
import { Button, Row, Col } from 'reactstrap'
const columns =
[
    {
        label: 'Certificate',
        field: 'certificate',
        sort: 'asc'
    },
    {
        label: 'Speciality',
        field: 'speciality',
        sort: 'asc'

    },
    {
        label: 'Pay Rate ($)',
        field: 'pay_rate',
        sort: 'disabled'

    },
    {
        label: 'Weekend Pay Rate ($)',
        field: 'weekend_pay_rate',
        sort: 'disabled'

    },
    {
        label: 'Action',
        field: 'action',
        sort: 'disabled'

    }
]

const formatCertSpec = (data, certificates, handleModelClose) => {
var cert = []
data && data.map((item) => (
    certificates && certificates.map((certs) => {
        if (certs.id == item.certificateId) {
            certs.specialities && certs.specialities.map((certSpec) => {
                if (item.speciality == certSpec.id) {
                    cert.push({
                        certificate: certs.abbreviation,
                        speciality: certSpec.name,
                        pay_rate: item.payRateCents ? `$${(item.payRateCents / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}` : '',
                        weekend_pay_rate: item.weekendPayRateCents ? `$${(item.weekendPayRateCents / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}` : '',
                        action: <Button color="link" onClick={(event) => {
                            event.preventDefault()

                            handleModelClose({
                            certificate: certs.abbreviation,
                            speciality: certSpec.name,
                            id: item.id,
                            pay_rate: item.payRateCents / 100,
                            weekend_pay_rate: item.weekendPayRateCents / 100,
                        })}}>
                            <FontAwesomeIcon key="edit" className="ml-2" icon={faPencilAlt} />
                        </Button>
                    })
                }
            })
        }
    })
))
return cert
}

function AddPayRatesComp({
data,
certificates,
handleModelClose,
handleNextPrevTabs
}) {
const certAndSpecPayData = formatCertSpec(data, certificates, handleModelClose)
console.log(certAndSpecPayData)
return (
    <div className="container-fluid">
        <PayRatesTable
            columns={columns}
            certificates={certificates}
            certs={certAndSpecPayData}
        />
        <Row className="mb-2 text-center">
            <Col className="col-md-3">
            </Col>
            <Button
                type="button"
                onClick={() => handleNextPrevTabs('prev')}
                outline
                color="secondary"
                className="btn-rounded font-weight-bold py-1 mr-2 mt-2 col-sm-12 col-md-3"
            ><FontAwesomeIcon icon={faAngleLeft} /> Previous</Button>
            <Button
                type="button"
                onClick={() => handleNextPrevTabs('next')}
                outline
                color="secondary"
                disabled
                className="btn-rounded font-weight-bold py-1 mr-2 mt-2 col-sm-12 col-md-3"
            >Next <FontAwesomeIcon icon={faAngleRight} /></Button>
        </Row>
    </div>
);
}

export default AddPayRatesComp;

PayRatesTable. js

import React from 'react'
import { MDBDataTable } from 'mdbreact'

const PayRatesTable = ({ columns, certs }) => {
const data = {
columns: columns,
rows: certs
}

return (
<>
  <MDBDataTable
    striped
    bordered
    medium="true"
    responsive
    data={data}
    order={['certificate', 'asc' ]}
  />
  <style jsx global>{`
      @import "../styles/bootstrap-custom/jsx-import";
      .table thead:last-child{
        display:none;
      }
    `}</style>
</>
);
}

export default PayRatesTable;

Это все, что я могу предоставить из-за проблем с безопасностью.