How call useQuery inside jsx with params

export function MemberQueryList({ list }: Props) {
  
function checkIsOwner(housingAssociationId: string, memberId: string) {
    const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
      housingAssociationId,
      memberId,
    });

    return isOwner.data?.ok ?? false;
  }
  const navigate = useNavigate();
  const userId = getSubFromLocalStorage() ?? "";
  return (
    <div>
      {list.map((housingAssociation: listData) => {
        const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
        return (
          <BoardCard
            key={housingAssociation.id}
            onClick={() => {
              navigate(
                `/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
              );
            }}
            state={housingAssociation}
            isOwner={isOwner}
          />
        );
      })}
    </div>
  );
}