Redux　action.payloadがうまく動かない

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    loggedIn: false,
    loginUser: "",
  },
  reducers: {
// 別のアクションを省略

    setUser: (state, action) => {
      state.loginUser = action.payload
    }
  },
});

export const { login, logout, setUser } = authSlice.actions;

export default authSlice.reducer;

function LoginForm() {

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const loggedIn = useSelector((state) => state.auth.loggedIn)
  const loginUser = useSelector((state) => state.auth.loginUser)
  const dispatch = useDispatch()
  const navigate = useNavigate()

  useEffect(() => {
    loggedIn && navigate("/main")
  }, [ loggedIn ])

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username && password) {
      dispatch(login())
      dispatch(setUser(username))
      console.log('ログイン成功');
      console.log('state loginUser:' + loginUser);
      console.log('user:' + username);
    } else {
      console.log('ユーザー名とパスワードを入力してください');
    }
  };

return (

//　省略
        <form>
            // 省略
            <input
              type="text"
              id="username"
              name="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          <button type="submit" className="submit-btn">ログイン</button>
        </form>
  );

"@reduxjs/toolkit": "^1.9.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "web-vitals": "^2.1.4"