DataTable not updating correctly

[puppycoder77]

Hello. I'm using a DataTable component and I set it's data attribute to an state passed in as a prop. This state prop is being set to the value of parsed localstorage item. The issue is that If I delete the first row, the row the table won't update. But any other row that's not the first one can be deleted and the table updates correctly. Please I'll need an urgent reply as I have a review on the project I'm working on . Thanks so much for your time developing this beautiful component. I appreciate.

DELETE FUNCTION(On Child component that contains the DataTable Component)

const DeleteRecord = (id) => { let ls = JSON.parse(localStorage.getItem("BenflocalStore")); let filtdata = ls.filter((d,i) => i !== id); localStorage.setItem("BenflocalStore", JSON.stringify(filtdata)); setBenfLocStoreArr(filtdata);

    window.$(".modal").modal("hide");
    setNum(num => num + 1);
}

ON THE PARENT COMPONENT

  useEffect(() => {
    if (localStorage.getItem("BenflocalStore")) {
        let parsedBenfLocStore = JSON.parse(localStorage.getItem("BenflocalStore"));
        setBenfLocStoreArr(parsedBenfLocStore);
    }
}, [num]);

BEFORE DELETING THE FIRST ROW

AFTER DELETING THE FIRST ROW(Updated wrongly)

AFTER REFRESHING THE PAGE MANUALLY