persist the state of selected checkboxes antd table using local storage react js

In this code, I have created local storage ‘selection’ for storing what is checked.

when I reload the page, what was selected before should already show a checked

I am not aware if there is a properly like that for antd table
please help
app.js file

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      localStorage.setItem("selection", JSON.stringify(selectedRows));
      var storage = localStorage.getItem("selection");
      console.log(storage);
      // console.log(
      //   `selectedRowKeys: ${selectedRowKeys}`,
      //   "selectedRows: ",
      //   selectedRows
      // );
    },
    getCheckboxProps: (record) => ({
      disabled: record.ifsc === "Disabled User",
      ifsc: record.ifsc,
      className: "checkbox-red"
    })
  };

  // var dataSource2 = this.storage;
  return (
    <>
      <div className="container">
        <div className="container2">
          <Search
            onChange={(e) => setSearchVal(e.target.value)}
            placeholder="Search"
          />
        </div>
        <br /> <br />
        <Table
          rowSelection={rowSelection}
          rowKey="ifsc"
          dataSource={filteredData}
          columns={userColumns}
          loading={loading}
          pagination={
            <Pagination
              size="small"
              showSizeChanger
              showQuickJumper
              defaultCurrent={2}
              total={500}
              onChange={onChange2}
            />
          }
        />

link below
https://codesandbox.io/s/search-in-react-table-forked-p9x544