jqxGrid (React) - with the "bootstrap" theme the buttons in the pager stay focused/pressed

[jqwidgets]

Used this tutorial for a base:
https://www.jqwidgets.com/react-components-documentation/documentation/create-react-app/index.htm

Example:

import React, { Component, useRef } from 'react';
// import { connect } from 'react-redux';

// import logo from './logo.svg';
// import './App.css';

import JqxGrid, { jqx }            from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.bootstrap.css';

export default function App() {
  let isProcessing = false;
  const gridRef = useRef();
  let source = {
    datafields: [
      { name: "id" },
      { name: "first_name" },
      // { name: "last_name" },
      // { name: "email" },
      // { name: "sso_id" }
    ],
    root: "data",
    cache: false,
    datatype: "json",
    url: "https://api.staging.branditpod.com/data_controller_2/?model=DataUser&sortdatafield=first_name&sortorder=asc",
    // localdata: [ {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {} ],
    beforeprocessing: (data) => {
      source.totalrecords = data[0].total_rows;
      console.log("source.totalrecords: " + source.totalrecords);
      console.log(data);
    },
    sort: () => {
      if (!isProcessing) {
        isProcessing = true;
        gridRef.current.updatebounddata("sort");
      }
    },
    filter: () => {
      if (!isProcessing) {
        gridRef.current.updatebounddata("filter");
      }
    }, 
    // clearFilters: () => {
    //   gridRef.clearfilters();
    // }
  };

  let dataAdapter = new jqx.dataAdapter(source);
  const columns = [
    {
      text: "ID",
      datafield: "id",
      type: "number",
      cellsalign: "right",
      width: "5%",
      editable: false
    },
    {
      text: "First Name",
      datafield: "first_name",
      type: "string",
      editable: false
    },
    // {
    //   text: "Last Name",
    //   datafield: "last_name",
    //   type: "string",
    //   editable: false
    // },
    // {
    //   text: "Email",
    //   datafield: "email",
    //   type: "string",
    //   editable: false
    // },
    // {
    //   text: "ECPID",
    //   datafield: "sso_id",
    //   type: "string",
    //   editable: false
    // }
  ];
  
  return (
    <div className="App">
      <div style={{ margin: 20 }}>
        <JqxButton width={80} height={20} theme={"bootstrap"}>Test</JqxButton>
      </div>

      <JqxGrid
        ref={gridRef}
        theme={"bootstrap"}
        width={"100%"}
        columns={columns}
        columnsreorder={true}
        columnsresize={true}
        columnsautoresize={true}
        filterable={true}
        showfilterrow={true}
        autosavestate={true}
        autoloadstate={true}
        autoheight={true}
        pagesizeoptions={["15", "30", "50"]}
        sortable={true}
        pageable={true}
        pagesize={10}
        virtualmode={true}
        rendergridrows={
          function (params) {
          return params.data;
          }
        }
        source={dataAdapter}
        onBindingcomplete = {
          function () {
            isProcessing = false;
          }
        }
      />
    </div>
  );
}