in the reporttable, the useEffect is triggered on data change and the data i logged in the useEffect also shows the correct data but my table shows the old data and the new data is not even shown on a refresh but takes 3-4 refreshes... You can have a look at my report table component:

const ReportTable = ({ data, keyword }) => {

const { detectChanges } = useStateContext(); const [isSortByDate, setIsSortByDate] = useState(false);

const [loading, setLoading] = useState(false);

 // We start with an empty list of items. 

let items = [...data]; let itemsPerPage = 22; 

const [currentItems, setCurrentItems] = useState([]);

 const [pageCount, setPageCount] = useState(0);

const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {

console.log("reporttable useEffect called!", data);

items = keyword ? items?.filter((item) => { return Object.entries(item).some(([key, v]) => { return ( key !== "status" && key !== "topic" && v.toLowerCase().includes(keyword.toLowerCase()) ); }); }) : items;

// Fetch items from another resources. const endOffset = itemOffset + itemsPerPage; setCurrentItems(items.slice(itemOffset, endOffset)); setPageCount(Math.ceil(items.length / itemsPerPage)); }, [itemOffset, itemsPerPage, keyword, sortKey, data]);

// Invoke when user click to request another page.

 const handlePageClick = (event) => { const newOffset = (event.selected * itemsPerPage) % items.length; setItemOffset(newOffset); };

); };

return ( <div className="flex flex-col w-full justify-center "> <div className="w-full"> <div className="px-4 md:px-10 py-4 md:py-7"> <div className="sm:flex items-center justify-between"> <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold leading-normal text-gray-800"> Customers </p> </div> </div> {loading ? ( <Spinner message={`Making Changes...`} /> ) : ( <div className="bg-white px-4 md:px-10 pb-5"> <div className="overflow-x-auto"> <table id="form1" className="w-full whitespace-nowrap"> <tbody> <tr className="text-sm leading-none border-b-2 border-stone-300 h-16"> <td className="w-1/2"> <div className="flex items-center"> <div className="pl-2"> <p className="text-sm font-semibold leading-none "> Name </p> </div> </div> </td> <td className="pl-3"> <p className="font-semibold">Address</p> </td> <td> <p className="pl-3 font-semibold">Phone</p> </td> </tr> {currentItems?.map((el, i) => { return ( <tr className="text-sm leading-none h-16 border-b-1 border-gray-300"> <td className="w-1/2"> <div className="flex items-center"> <Link to={`/useredit/${el.id}`}> <div className={`pl-2 ${ el.Name == "Empty" && "text-gray-300" }`} > <p className="text-sm font-medium leading-none "> {el.Name} </p> </div> </Link> </div> </td> <td className={`pl-3 ${ el.Address == "Empty" && "text-gray-300" }`} > <Link to={`/useredit/${el.id}`}> <p>{el.Address}</p> </Link> </td> <td> <p className={`pl-3 ${ el.Phone == "Empty" && "text-gray-300" }`} > {el.Phone} </p> </td>

                    <td className="pl-10 text-xl">
                      <Link to={`/useredit/${el.id}`}>
                        <BiShow />
                      </Link>
                    </td>
                    <td className="pl-3 text-xl">
                      <Link to={`/useredit/${el.id}`}>
                        <AiFillEdit />
                      </Link>
                    </td>
                    <td className="pl-3 pt-1 text-xl">
                      <button onClick={() => deleteItem(el.id)}>
                        <AiFillDelete />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    )}
  </div>
  <hr className="hr" />
  <div className="flex flex-row w-full justify-center">
    <ReactPaginate
      breakLabel="..."
      nextLabel={<FaAngleRight />}
      onPageChange={handlePageClick}
      pageRangeDisplayed={5}
      pageCount={pageCount}
      previousLabel={<FaAngleLeft />}
      renderOnZeroPageCount={null}
      containerClassName="flex flex-row"
      pageClassName="pr-2 pl-2"
      pageLinkClassName=""
      nextClassName="mt-1 ml-2"
      nextLinkClassName="page-link"
      previousClassName="mt-1 mr-2"
      previousLinkClassName=""
      activeClassName="bg-slate-900 text-white border rounded-full"
    />
  </div>

</div>

); }; export default ReportTable;