Redux persist saves the data in the localstorage but doesn't populate it after

This is how I provide the data:

 <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <I18nextProviderHoc i18n={i18n}>
                        <Switch>
                            <Route exact path={`${match.path}/`} component={ViewAll}/>
                        </Switch>
                    </I18nextProviderHoc>
                </PersistGate>
            </Provider>

In my localStorage I can see the persisted data with the desired result. In my case I have a data table and want to show particular number of records. By default the number is 10. Changing it to 20, the limit is updated in the localStorage but when I refresh the page it is again 10 on the page.

This is how I am getting the limit in my ViewAll component:

const limit = useSelector((store) => store.pages.lists.limit)