NextJS tRPC Typescript errors: Argument of type X is not assignable to parameter of type 'void' / Type X is not assignable to type 'undefined'

Question

I had typescript strict mode set to true and these errors weren't coming up in VS Code but when I went to deploy to Vercel it picked them up and the build failed. I then turned strict mode off and these errors showed up in a number of locations in VS Code.

I'm new to typescript, so I'm well over my head here, and not sure how I can type these void and undefined items so the error is resolved. I've spent 5 hrs crawling over the internet, probably with incorrect search terms, unable to find how to solve this.

below has an example of both issues:

// admin.tsx

import { trpc } from "../../utils/trpc";

function Admin(props: {id: number}) {

  // fetch data with id results in error:
  // Type '{ id: number; }' is not assignable to type 'undefined'.

  const { data: countdown, isLoading } = trpc.useQuery([
    "countdown.getCountdownAdmin",
    {
      id: props.id,
    },
  ]);

  
  // below relates to the parameter of type void error

  const utils = trpc.useContext();
  const mutateResults = trpc.useMutation(["countdown.updateResults"], {
    async onSuccess() {
      await utils.invalidateQueries(["countdown.getCountdownAdmin"]);
    },
  });

  // the error presents on this function.  Error message:
  // Argument of type '{ countdownId: number; }' is not assignable to parameter of type 'void'.

  async function generateResults() {
    const data = await mutateResults.mutateAsync({
      countdownId: countdown.id,
    });
  }
return (
{some unimportant stuff here}
  );
}

export default Admin;

On the server side (I've removed unrelated queries):

// countdown.ts

import { TRPCError } from "@trpc/server";
import { createProtectedRouter } from "./protected-router";
import { z } from "Zod";

export const countdownProtected = createProtectedRouter()
.query("getCountdownAdmin", {
    input: z.object({
      id: z.number(),
    }),
    async resolve({ ctx, input }) {
      const { id } = input;
      try {
        const countdown = await ctx.prisma.countdowns.findUnique({
          where: {
            id: id,
          },
          include: {
            UserCountdowns: {
              include: {
                User: {
                  include: {
                    Votes: {
                      where: {
                        countdownId: id,
                      },
                    },
                  },
                },
              },
            },
            Results: true,
            InviteCode: true,
          },
        });

        return countdown;
      } catch (e) {
        console.log(e);
        throw new TRPCError({
          code: "BAD_REQUEST",
        });
      }
    },
  })
.mutation("updateResults", {
    input: z.object({
      countdownId: z.number(),
    }),
    async resolve({ ctx, input }) {
      const { countdownId } = input;
      // const user = ctx.session?.user?.id;

      try {
        const data = await ctx.prisma.countdowns.findUnique({
          where: {
            id: countdownId,
          },
          include: {
            Votes: {
              include: {
                User: true,
              },
              orderBy: {
                id: "asc",
              },
            },
          },
        });

        // long and unrelated function here that I've cut out
        
      } catch (e) {
        console.log(e);
        throw new TRPCError({
          code: "BAD_REQUEST",
        });
      }
    },
  });