Can't set redux state with data from local storage - reactjs

Question

I have redux-toolkit setup for managing app state. There is an 'authenticated' state variable that is false/true depending if the user is logged in. In the loginSuccessful reducer we set 'is_auth' in local storage and pull it from local storage in 'initialState'. In the login component we retrieve this variable from state to try and redirect based on the login being successful or not, but I can't seem to read the state variable after it is changed from the reducer and a redirect never happens...
here is the logic in login component
//app state
const authenticated = useSelector((state) => state.user.authenticated);
const error = useSelector((state) => state.user.error);
//form state
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const handleLogin = (e) => {
e.preventDefault();
login({ email, password }, dispatch);
};
if (authenticated) return <Navigate to='/admin' />;
here is the reducer code:
const userSlice = createSlice({
name: 'user',
initialState: {
currentUser: null,
isLoading: false,
error: false,
authenticated: null || localStorage.getItem('is_auth'),
},
reducers: {
loginStart: (state) => {
state.isLoading = true;
state.error = false;
// state.authenticated = false;
},
loginSuccess: (state, action) => {
state.isLoading = false;
state.currentUser = action.payload;
localStorage.setItem('is_auth', true);
// state.authenticated = true;
},
loginFailure: (state) => {
state.isLoading = false;
state.error = true;
// state.authenticated = false;
},
logout: (state) => {
state.currentUser = null;
},
},
});
here is the login API request:
export const login = async (creds, dispatch) => {
dispatch(loginStart());
try {
const res = await apiRequest.post('auth/login', creds);
dispatch(loginSuccess(res.data));
} catch (err) {
dispatch(loginFailure());
}
};