Please help me with a situation around react-redux toolkit. I have issues in updating the state ( which i try to do in a immutable way ), and the component where I use it, never rerenders.

export const updateUser = createAsyncThunk("users/updateUser", async ({ id, name, username }) => {
  const response = await axios.patch(`https://jsonplaceholder.typicode.com/users/${id}`,{
    name,
    username
  });
  return response.data;
});


const userEntity = createEntityAdapter({
    selectId: (user) => user.id
})


const userSlice = createSlice({
  name: "user",
  initialState: userEntity.getInitialState(),
  extraReducers: {
    [getUsers.fulfilled]: (state, action) => {
      userEntity.setAll(state, action.payload);
    },
    [updateUser.fulfilled]: (state, action) => {
      userEntity.updateOne(state, { id: action.payload.id, update: action.payload});
    }
  },
});


export const userSelectors = userEntity.getSelectors(state => state.user)
export default userSlice.reducer;

const EditUser = () => {
  const [name, setName] = useState('');
  const [username, setUserName] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { id } = useParams();

  const user = useSelector((state) => userSelectors.selectById(state, id));

  useEffect(() => {
    dispatch(getUsers());
  },[dispatch]);

  useEffect(() => {
    if(user){
      setName(user.name);
      setUserName(user.username);
    }
  },[user]);

  const handleUpdate = async (e) => {
    e.preventDefault();
    await dispatch(updateUser({id, name, username}));
    navigate('/user');
  }

whenever I click on button and update the state. it updates on redux. but state does not update. What am i doing wrong?

Image Explanation 1

Image Explanation 2

Image Explanation 3