@tanstack/react-virtual not displaying my virtual list

getBySociety: protectedProcedure
    .input(
      z.object({
        societyId: z.string().cuid(),
        limit: z.number().min(1).max(100).nullish(),
        cursor: z.string().nullish(),
      }),
    )
    .query(async ({ ctx: { db }, input: { societyId, cursor, limit } }) => {
      const _limit = limit ?? 2;
      const announcements = await db.announcement.findMany({
        where: {
          societyId,
        },
        take: _limit,
        cursor: cursor ? { id: cursor } : undefined,
        orderBy: {
          createdAt: "desc",
        },
        select: {
          id: true,
          member: {
            select: {
              image: true,
              name: true,
            },
          },
          content: true,
          attachments: { select: { name: true, uri: true } },
          _count: {
            select: { comments: true },
          },
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (announcements.length > _limit) {
        const nextItem = announcements.pop();
        nextCursor = nextItem!.id;
      }

      return {
        announcements,
        nextCursor,
      };
    }),