MMKV Storage ID Update on Auth Change

[markmccoid]

I have a react native app that allows multiple users. When one user logs in I want to persist their data to a unique MMKV id for their user.
I have been having a hard time figuring out how to do this. I believe I have it set up to store to each users unique MMKV id, however, when I log out and log into a new user, the last users observable still has their state in it.
When I try to clear the state before logging in the new user, I either clear the MMKV area for the users id or the observable doesn't update.

I have a function that runs whenever my current user changes and it updates the variable where the observable is stored:

Any hints or obvious things I'm doing incorrectly? Thanks!!

authManager.subscribe(async () => {
  // Recreate and persist a new observable when auth changes
  const state$ = syncState(savedShows$);
  state$.isPersistEnabled.set(false);
  savedShows$.shows.set({});
  // global savedShow$
  savedShows$ = createAndPersistObservable<{ shows: SavedShows } & ShowFunctions>(
    { ...initialState },
    { id: authManager?.currentUser?.id || 'placeholder', name: 'savedshows' }
  );
  
});

export type PersistedObservableOptions = {
  id: string | undefined;
  name: string;
};

//~~ -----------------------------------------
//~~ createAndPersistObservable
//~~ Called via the AuthManager notify() function
//~~ -----------------------------------------
export function createAndPersistObservable<T>(
  initialState: T,
  options: PersistedObservableOptions
): Observable<T> {
  options.id = authManager?.currentUser?.id;
  if (options.id === undefined) {
    options.id = 'placeholder';
  }
  // Create a new observable with the initial state
  const newObs$ = observable<T>(initialState);

  // Configure MMKV persistence
  const customMMKVConfig = new ObservablePersistMMKV({ id: options.id });

  // Persist the observable
  syncObservable(newObs$ as unknown as Observable<any>, {
    persist: {
      plugin: customMMKVConfig,
      name: options.name,
    },
  });

  return newObs$;
}