[React Native] [Expo] Render an unmounted component on Atom update

[abhishrek]

I am creating simple login/logout routes using expo router, and firebase auth.

The Story:
A "user" atom that is non-null when logged in and null when logged out.
Based on this "user" atom the root component returns either the login screen or redirects to a bottom tab navigator.

The Issue:
Once logged in, the focus moves to bottom tab navigator and if logout from there, the "user" atom becomes null,
but since root component isnt mounted, the new atom value isnt reflected there. and focus doesnt return to login screen.
After Sign Out if i manually click the link "Go to Index.js" I land on the login screen. Which means Atom is getting updated on signout, but its not triggering the rerender of the index.js

The Ask:
A solution where upon updating an atom from one screen, some other unmounted screen to be rerendered.

This might be a very basic question in react + jotai, but i couldnt find enough resources on SO etc

// Index.js ------------------------------------------
import { useAtom } from "jotai";
import { userAtom } from "@/atoms/user";

export default function Index() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const {
    signInWithEmailAndPassword,
    signOut,
  } = useFirebaseAuth();

  const [user] = useAtom(userAtom);

  return (
    <View style={styles.container}>
      {user ? (
        <Redirect href={"/home"} />
      ) : (
        <>
          <TextInput value={email} onChangeText={setEmail} />
          <TextInput value={password} onChangeText={setPassword} />
          <Button
            title="Sign In"
            onPress={() => signInWithEmailAndPassword(email, password)}
          />
        </>
      )}
    </View>
  );
}

// useFirebaseAuth.js ------------------------------------------

import { userAtom } from "@/atoms/user";
import auth from "@react-native-firebase/auth";
import { useAtom } from "jotai";
import { useEffect } from "react";

export function useFirebaseAuth() {
  const [user, setUser] = useAtom(userAtom);

  const signInWithEmailAndPassword = async (
    email: string,
    password: string
  ) => {
    try {
      const { user } = await auth().signInWithEmailAndPassword(email, password);
      setUser(user);
    } catch (e) {
      console.error(e);
    }
  };

  const signOut = async () => {
    try {
      await auth().signOut();
      setUser(null);
    } catch (e) {
      console.error(e);
    }
  };

  return {
    signInWithEmailAndPassword,
    signOut,
  };
}

// Top.tsx -------- A screen in tab navigtor where SignOut is called ----------
import { useFirebaseAuth } from "@/hooks/useFirebaseAuth";

export default function Top() {
  const {
    signInWithEmailAndPassword,
    signOut,
  } = useFirebaseAuth();

  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <Button title="Sign Out" onPress={signOut} />
      <Link href="/">Go to Index.js</Link>
    </View>
  );
}