useSelector() providing initial value instead of updated value?

I am using redux along with react-redux and unable to use the useSelector() function to access the updated value.

Reducer
Imported the action inside the reducer
Initialised state
Called reducer and initialised the state as initial state
Added a conditional statement which updates the initial state

import { UPDATE_EMAIL } from "../actions/cred";

const initialState = {
  phone: "",
  uid: null,
  tp: null,
};

const credReducer = (state = initialState, action) => {
  // return state;
  if (action.type === UPDATE_EMAIL) {
    return {
      ...state,
      phone: action.phone,
      uid: action.uid,
      tp: action.tp,
    };
  } else {
    return state;
  }
};

export default credReducer;

Action

export const UPDATE_EMAIL = "UPDATE_EMAIL";

export const updateEmail = (id, uid, tp) => {
  return { type: UPDATE_EMAIL, phone: id, uid: uid, tp: tp };
};

Create Store

function Root() {
  const [tkn, updateTkn] = useState("");
  const [type, updateType] = useState("");
  
  const rootReducer = combineReducers({
    auth: credReducer,
  });

  const store = createStore(rootReducer);
  store.subscribe(() => {
    console.log("in subscribe");
    console.log(store.getState().auth);
    updateType(store.getState().auth.tp);
    updateTkn(store.getState().auth.phone);
  }, []);

  return (
    <Provider store={store}>
      <NavigationContainer>
        {tkn === "" || tkn === null ? (
          <Auth />
        ) : type === "doctor" ? (
          <Doctor />
        ) : (
          <Vendor />
        )}
      </NavigationContainer>
    </Provider>
  );
}

Fetching Store Value

function Home() {
  const auth = useSelector((state) => state.auth);
  console.log("in home");
  console.log(auth);

  return (
    <View style={styles.box}>
      <Ucard />
    </View>
  );
}

export default Home;

and finally the output getting from the above block enter image description here Home console log Output