When i call this.setState to update the value of any state, The sorting of mdboostrap datatable resets for some reason. I am calling a function on the OnClickEvent of the datatable like this

<MDBDataTableV5 hover striped responsive bordered theadColor='red' theadTextWhite entriesOptions={[5, 10, 20, 50]} entries={10} pagesAmount={4} data={datatable} searchBottom={false} searchTop onClick={event => { this.toggleKnModal(event,"Open") }} />

The toggle event definition:

toggleKnModal = (data , type) => {
    let rowIndex = -1
    if (type == "Open") {
        let rowInfo = data.nativeEvent.path[1];
        rowIndex = rowInfo.rowIndex;

        if (rowIndex > 0) {
            let value1 = rowInfo.children[0].innerText;
            let value2 = rowInfo.children[1].innerText;
            let value3 = rowInfo.children[6].innerText; //I have changed the names of the variables 
            this.setState({ knValues: { value1: value1 , value2: value2 , value3: value3 , somenumber: 0 } })
        }
    }
    if (rowIndex != 0)
        this.setState({ modal: !this.state.modal })
}

If I remove the this.setState code then the sorting of the data table is unchanged. I tried replacing this.setstate with simply this.state.* and it only updates KnValues but not modal. I have no idea what the issue is and the output log doesn't say anything.

Edit: Also note that both of these states are not related to the datatable in any way