Is enriching the query-return props a good practice?

// use-current-user.js
export function useCurrentUser() {
  const query = useQuery({
    queryKey: ["users", "detail", "me"],
    staleTime: 1000 * 1800,
    queryFn: () => rq(currentUserQuery).then((data) => data.currentUser),
  });

  return {
    ...query,
    currentUser: query.data,
    hasRightFn: (right) =>
      query.isSuccess ? query.data.rights.includes(right) : false,
  };
}

// use-current-user.js
export function useCurrentUser() {
  const query = useQuery({
    queryKey: ["users", "detail", "me"],
    staleTime: 1000 * 1800,
    queryFn: () => rq(currentUserQuery).then((data) => data.currentUser),
  });

  return {
    ...query,
    currentUser: query.data,
    hasRightFn: (right) =>
      query.isSuccess ? query.data.rights.includes(right) : false,
  };
}

function MyComponent() {
  const { hasRightFn } = useCurrentUser();

  return (
    <div>
      {hasRightFn("refund_allowed") ? (
        <Button>Refund</Button>
      ) : null}
    </div>
  )
}

function MyComponent() {
  const { hasRightFn } = useCurrentUser();

  return (
    <div>
      {hasRightFn("refund_allowed") ? (
        <Button>Refund</Button>
      ) : null}
    </div>
  )
}