Redux toolkit: updating state with entityAdapter vs custom callback

Question

In have an async request to log a user in:

export const loginUser = createAsyncThunk('users/login', async userInputs => {
  try {
    const { data } = await axios.post(
      'url',
      userInputs
    );
    Cookies.set('user', JSON.stringify(data));
    return data;
  } catch (error) {
    return error.response.data;
  }
});

In my store slice I have:

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers(builder) {
    // builder.addCase(loginUser.fulfilled, usersAdapter.addOne); // <-- updates state with a delay?
    builder.addCase(loginUser.fulfilled, (state, action) => {
      state.user = action.payload;
    });
  },
});

When a user clicks a Log In button the thunk is dispatched. When it returns, the user is redirected to the Home page, which renders conditionally:

useSelector(state => state.user) ? <Home /> : null

With the custom callback this works. However, if I switch to using createEntityAdapter with addOne in the slice:

builder.addCase(loginUser.fulfilled, usersAdapter.addOne);

The useSelector call returns null until I reload the page. Why?

Edit:

The initialState looks like this:

const initialState = {
  user: Cookies.get('user') ? JSON.parse(Cookies.get('user')) : null,
};

And the loginHandler:

const loginHandler = async () => {
  const data = await dispatch(
    loginUser({
      email,
      password,
    })
  ).unwrap();
  navigate('/');
};