persistentState not working when page refreshed, Handsontable- React.js

I am currently using handsontable with react.js, I have to persist manual changes to table's column widths and sorting orders even if the user refreshes the page. I have persistentState attribute enabled to the handsontable's setting.

Upon refreshing the page the manual change made to column width, sorting orders etc. won't persist and the table is back to default state. Although I can see the updated column widths & sorting orders etc. inside of my browser local storage.

Current Versions: @handsontable/react: ^12.1.2, handsontable": ^12.1.2,

  const MyHotTable = ({ data }) => {

    const { elementRef, elementBounds } = useTableSize()

    const hotSettings = {
      data,
      colHeaders: ['ID', 'COL1, 'COL2', 'COL3', 'COL4', 'COL5', 'COL6', 'COL7'],
      colWidths: [50, 50, 50, 50, 300, 50, 100, 100],
      autoRowSize: false,
      autoColumnSize: false,
      columnSorting: true,
      height: elementBounds.fullWindowHeight,
      manualColumnResize: true,
      rowHeaders: false,
      stretchH: 'all',
      filters: true,
      manualColumnMove: true,
      dropdownMenu: ['filter_by_value', 'filter_action_bar'],
      hiddenColumns: {
        columns: [0],
      },
      disableVisualSelection: true,
      persistentState: true,
    }

    const CustomRenderer = (props: any): any => {
      const { value, row, cellProperties } = props
      const id = cellProperties.instance.getDataAtRow(row)[0]
      return <Link to={`/abc/${id}`}>{value}</Link>
    }
    
    return (
      <HotTable ref={elementRef} settings={hotSettings}>
       <HotColumn data={'id'} readOnly />
       <HotColumn data={'col_1} readOnly />
       <HotColumn data={'col_2'} readOnly />
       <HotColumn data={'col_3'} readOnly />
       <HotColumn data={'col_4'} readOnly>
         <CustomRenderer hot-renderer />
       </HotColumn>
       <HotColumn data={'col_5'} readOnly />
       <HotColumn data={'col_6'} readOnly />
       <HotColumn data={'col_7'} readOnly />
     </HotTable>
    )
  }

screen shot of local storage for reference

For the data separation to work properly, make sure that each instance of Handsontable has a unique id.

<HotTable ref={elementRef} settings={hotSettings} id={"unique_id"}>
   <HotColumn data={'id'} readOnly />
    .
    .
    .
</HotTable>

For more information, visit: saving data locally