Can't persist MobX state tree in React Native

Question

I am using MobX-state-tree for state management and mst-persist to persist my data. The problem is when I reload the app the initial data of the store renders first and then the persist data gets loaded. So whenever I want to check a persisted data in my store the initial data renders first, My function runs based on that and when everything stopped rendering my persisted data renders. This code is a simplified version of my problem. When app renders first I get "false" in my console then I get "True". Even after I comment out the setTemp(). Is there any way to fix this or is there another package that I can use for persisting MST?

Rootstore.ts

import {
  types,
  Instance,
  applySnapshot,
  getSnapshot,
} from 'mobx-state-tree';
import {createContext, useContext} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {persist} from 'mst-persist';


const RootStore = types
  .model('RootStore', {
    temp: false,
  })
  .actions(store => ({
    setTemp() {
      applySnapshot(store, {...getSnapshot(store), temp: true});
    },
  }));
  
  let _store: any = null;

export function initializeStore() {
  _store = RootStore.create({});
  persist('@initstore', _store, {
    storage: AsyncStorage,
    jsonify: true,
    whitelist: ['temp'], 
  });

  return _store;
}
export type RootInstance = Instance<typeof RootStore>;
const RootStoreContext = createContext<null | RootInstance>(null);
export const Provider = RootStoreContext.Provider;

export function useStore(): Instance<typeof RootStore> {
  const store = useContext(RootStoreContext);
  if (store === null) {
    throw new Error('Store cannot be null, please add a context provider');
  }
  return store;
}

App.ts

import {initializeStore,Provider} from './src/store/RootStore';

const store = initializeStore();

<Provider value={store}>
  <RootStack /> //the App
</Provider>

InitializeScreen.ts

import {observer} from 'mobx-react-lite';
import {useStore} from '../../store/RootStore';

const InitializeScreen = observer((): JSX.Element => {
  const {setTemp,temp} = useStore();
  useEffect(() => {
    setTemp()
  }, []);

  console.log('init page',temp); // <-- Every time app reloads reneders false then true
  
  
  return (
    <Text>InitializeScreen</Text>
  );
});

export default InitializeScreen;