Error when search on page 2/3/4 etc

[ardynugraha]

Search on page 1 is working fine but error when search on page 2/3/4/5

Code:

<PaginationProvider
    pagination={paginationFactory(pageOptions)}
    keyField='ID'
    columns={columns}
    data={this.state.dataReceipt}
  >{({ paginationProps, paginationTableProps }) => (
      <ToolkitProvider
        keyField='ID'
        columns={columns}
        data={this.state.dataReceipt}
        search={{
          placeholder: 'Find'
        }}
      >
        {toolkitProps => (
          <React.Fragment>
            <Row className="mb-2">
              <Col md="4">
                <div className="search-box me-2 mb-2 d-inline-block">
                  <div className="position-relative">
                    <SearchBar
                      placeholder={"Find"}
                      {...toolkitProps.searchProps}
                    />
                    <i className="bx bx-search-alt search-icon" />
                  </div>
                </div>
              </Col>
            </Row>
            <Row>
              <Col xl="12">
                <div className="table-responsive">
                  <BootstrapTable
                    keyField={"ID"}
                    responsive
                    bordered={false}
                    striped={false}
                    defaultSorted={defaultSorted}
                    selectRow={selectRow}
                    classes={
                      "table align-middle table-nowrap"
                    }
                    rowEvents={tableRowEvents}
                    headerWrapperClasses={"thead-light"}
                    {...toolkitProps.baseProps}
                    {...paginationTableProps}
                  />
                </div>
              </Col>
            </Row>
            <Row className="align-items-md-center mt-30">
              <Col className="inner-custom-pagination d-flex">
                <div className="d-inline">
                  <SizePerPageDropdownStandalone
                    {...paginationProps}
                  />
                </div>
                <div className="text-md-right ms-auto">
                  <PaginationListStandalone
                    {...paginationProps}
                  />
                </div>
              </Col>
            </Row>
            <br />
          </React.Fragment>
        )}
      </ToolkitProvider>
    )}
</PaginationProvider>`

"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",

Error message:

Uncaught TypeError: Cannot read properties of undefined (reading 'ID')
    at Function.get (utils.js:29:1)
    at selection.js:25:1
    at Array.map (<anonymous>)
    at getSelectionSummary (selection.js:24:1)
    at SelectionProvider.render (selection-context.js:145:1)
    at finishClassComponent (react-dom.development.js:17485:1)
    at updateClassComponent (react-dom.development.js:17435:1)
    at beginWork (react-dom.development.js:19073:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
    at Object.enqueueSetState (react-dom.development.js:12467:1)
    at ToolkitProvider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365:1)
    at ToolkitProvider.onSearch (context.js:88:1)
    at SearchBar.js:70:1
    at later (SearchBar.js:36:1)

The above error occurred in the <SelectionProvider> component:

    at SelectionProvider (http://localhost:3000/static/js/vendors~main.chunk.js:391764:5)
    at PaginationDataProvider (http://localhost:3000/static/js/vendors~main.chunk.js:398745:5)
    at SortProvider (http://localhost:3000/static/js/vendors~main.chunk.js:391999:7)
    at SearchProvider (http://localhost:3000/static/js/vendors~main.chunk.js:402360:9)
    at DataProvider (http://localhost:3000/static/js/vendors~main.chunk.js:390858:7)
    at BootstrapTableContainer (http://localhost:3000/static/js/vendors~main.chunk.js:391045:7)
    at div
    at div
    at Col (http://localhost:3000/static/js/vendors~main.chunk.js:520290:25)
    at div
    at Row (http://localhost:3000/static/js/vendors~main.chunk.js:525236:25)
    at ToolkitProvider (http://localhost:3000/static/js/vendors~main.chunk.js:401227:5)
    at Toolkitprovider
    at StateProvider (http://localhost:3000/static/js/vendors~main.chunk.js:400909:5)
    at CustomizableProvider
    at div
    at CardBody (http://localhost:3000/static/js/vendors~main.chunk.js:518928:25)
    at div
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:518869:25)
    at div
    at Col (http://localhost:3000/static/js/vendors~main.chunk.js:520290:25)
    at div
    at Row (http://localhost:3000/static/js/vendors~main.chunk.js:525236:25)
    at div
    at div
    at Unidentified (http://localhost:3000/static/js/main.chunk.js:183643:5)
    at div
    at div
    at Layout (http://localhost:3000/static/js/main.chunk.js:14122:5)
    at C (http://localhost:3000/static/js/vendors~main.chunk.js:496112:37)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:489196:75)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:495855:29)
    at AppRoute (http://localhost:3000/static/js/main.chunk.js:189591:16)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:496057:29)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:495486:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:495107:35)
    at App (http://localhost:3000/static/js/main.chunk.js:605:5)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:489196:75)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:495486:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:495107:35)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:488907:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[veselin1985]

I have the same issue. Any update on this ?

[pratik-zingworks]

I'm also facing same issue.

[truongsontn96]

I have the same issue. Please tell me any update on this ?

[imuhammadarsalan]

Same issue when i click next btn pagination ...

[tinhle92]

I have the same issue. Any update on this ?