need stateless data to compare in React bootstrap table functional component

Question

I am implementing a bootstrap table with a save button outside the table to save all the data modified at once instead of each row.

I received data (500 rows) from API and am modifying few rows (Let's say 10 rows).

Now I don't want to send all 500 rows to save back to API. I only want to send only 10 rows data to API call.

I have tried useRef and global variable. But my olddata variable always shows the latest data and diff is showing zero rows.

    import React, { useEffect, useState,useRef } from "react";
    import { Link } from "react-router-dom";

    import {
      Breadcrumb,
      BreadcrumbItem,
      Button,
      Card,
      CardBody,
      CardHeader,
      CardTitle,
      Container
    } from "reactstrap";

    import Header from "../../components/Header";
    import HeaderTitle from "../../components/HeaderTitle";

    import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

    import BootstrapTable from "react-bootstrap-table-next";
    import paginationFactory from "react-bootstrap-table2-paginator";
    import cellEditFactory, { Type } from "react-bootstrap-table2-editor";
    import filterFactory, { textFilter } from "react-bootstrap-table2-filter";


    import Services from "../../services/Services";
    import Sellergrid from "../../components/sellergrid";

    let olditems  = {}


    const PaginationTable = () => {

      const [datatems, setdataItems] = useState([]);

      useEffect(() => {
        fetchItems();
      }, []);

      const fetchItems = () => {
        Services.getItems().then(
         (res)=>{
            const data = res.data 
            setdataItems(data)
            olditems = res.data 
         }
     );
    }



    const  saveData = ()=>
    {
      const newone = datatems
      const oldone = olditems
      console.log("savedata: old global values")
      console.log(olditems)
      const modified = newone.filter((n) => { 
        return -1 === oldone.findIndex((o) => {
        return JSON.stringify(n) === JSON.stringify(o);
        }); 
       });
       console.log ("savedata:modified")
       console.log (modified)
    }

      const Columns = [
        { dataField: "category", text: "Category",sort: true },
        { dataField: "Subcategory", text: "SubCategory",sort: true},
        { dataField: "style", text: "Style",sort: true},
        { dataField: "size", text: "Size",sort: true},
        { dataField: "color", text: "Color",sort: true},
        { dataField: "channel", text: "Channel",sort: true},
        { dataField: "uniqueID", text: "UniqueID",sort: true},
        { dataField: "sku", text: "SKU",sort: true,editable: false},
        { dataField: "upc", text:"UPC",sort: true,editable: false},
        { dataField: "gtin", text:"gtin",sort: true,editable: false},
        { dataField: "status",text:"Status",sort: true,editable: false},
        { dataField: "price",text:"Price",sort: true,editable: false}, 
        { dataField: "productname", text: "ProductName",sort: true,filter: textFilter()}
        ]


      

      return (
        <Card>
          <CardHeader>
            <CardTitle tag="h5">SellerItems</CardTitle>
            <h6 className="card-subtitle text-muted">
              Seller Items for mapping
            </h6>
            <Button key= "btnSave"color="success" size="lg" className="mr-1" onClick={() => saveData()}>Save</Button>
          </CardHeader>
          <CardBody>
            <BootstrapTable
              keyField="uniqueID"
              data={datatems}
              columns={Columns}
              bootstrap4
              bordered={false}
              cellEdit={cellEditFactory({ mode: 'click',blurToSave: true}) }
              //selectRow={selectRow}
              filter={ filterFactory() }
              pagination={paginationFactory({sizePerPage: 5,sizePerPageList: [5, 10, 25, 50]})}
            />
          </CardBody>
        </Card>
      );
    };


    const SellerTable = () => (
      <Container fluid>
        <Header>
          <HeaderTitle>Seller Items</HeaderTitle>
          <Breadcrumb>
            <BreadcrumbItem>
              <Link to="/dashboard">Dashboard</Link>
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Link to="/dashboard">Tables</Link>
            </BreadcrumbItem>
            <BreadcrumbItem active>Items</BreadcrumbItem>
          </Breadcrumb>
        </Header>

        <PaginationTable />
        <Sellergrid/>
      </Container>
    );

    export default SellerTable;