Enabled sets data to undefined - solution?

export const UserModal = () => {
  const [query, setQuery] = useQueryStates(userModalParsers);

  const { data } = useQuery({
    queryKey: ['user-info', query.userId],
    staleTime: Infinity,
    refetchOnWindowFocus: false,
    enabled: Boolean(query.userId),
    queryFn: () =>
      getUserInfo({
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Enabled
        id: query.userId!
      })
  });

  return (
    <Dialog
      open={Boolean(query.userId)}
      onOpenChange={(open) => {
        if (!open) {
          void setQuery({
            userId: null
          });
        }
      }}
    >
      <DialogContent>{!data ? <Spinner /> : <p>User info</p>}</DialogContent>
    </Dialog>
  );
};