mdbreact is showing an unexpected behaviour

Question

I am using mdbreact package to make table for my data. It's having an action button in the last column which opens a modal for editing the data. Scenario is

1. I loaded the table with initial data
2. And then applied some sorting on it
3. And now I click on the edit button to open the modal for editing the data
4. Now the sorting gets automatically removed and it's looking really weird that modal is opening and data is changing in the background.

What do I need ?

I don't want data to be changed on the backend. Also, I don't know how to store that sorted data in the state even as I am using mdbreact for the first time.

Here you can check the exact issue I am facing.

File where I am formatting data and adding event and action to each row:

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;

This is all that I can provide due to security issues.