Update role in user (react query)

Question

I am trying to add a feature where you can update the role of the user. the code is my hook for updating the

export const useUserUpdate = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (data) => {
      return ApiManager.put(`/user/${data.id}`, data);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["userData"] });
    },
  });
};

this is my onSubmit for for my updating user

  const onSubmit = (sample) => {
    // userUpdate(data);
    console.log(userUpdate(sample));
  };

 <form onSubmit={handleSubmit(onSubmit)}>
        <FormControl fullWidth>
          <AutoComplete
            control={control}
            name={"roleId"}
            options={roleData?.data || []}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
              }
            }}
            getOptionLabel={(option) => option?.role_name}
            isOptionEqualToValue={(option, value) => option?.id === value?.id}
            renderInput={(params) => (
              <TextField
                name="roleId"
                {...params}
                label="Role"
                helperText={errors?.role?.message}
                error={Boolean(errors?.role)}
                sx={{ mb: 2 }}
              />
            )}
          />
        </FormControl>

        <Stack spacing={2} direction="row" justifyContent="flex-end">
          <Button type="submit" variant="outlined" color="success">
            Edit User
          </Button>
        </Stack>
      </form>

I am trying to update the user when i am clicking the button, it says