Type 'NextRequest' is missing properties from type 'NextApiRequest'

Enviorment: Node 18, pnpm Hi, I'm facing an error, where in my app i get this error at createTRPCContext({ req }):
Type 'NextRequest' is missing the following properties from type 'NextApiRequest': query, env, aborted, httpVersion, and 66 more.ts(2740)
types.d.ts(67, 5): The expected type comes from property 'req' which is declared here on type 'CreateNextContextOptions'
Type 'NextRequest' is missing the following properties from type 'NextApiRequest': query, env, aborted, httpVersion, and 66 more.ts(2740)
types.d.ts(67, 5): The expected type comes from property 'req' which is declared here on type 'CreateNextContextOptions'
This is how my entire app/api/trpc/[trpc]/route.ts file looks like:
import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@acme/api";

export const runtime = "edge";

/**
* Configure basic CORS headers
* You should extend this to match your needs
*/
function setCorsHeaders(res: Response) {
res.headers.set("Access-Control-Allow-Origin", "*");
res.headers.set("Access-Control-Request-Method", "*");
res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
const response = new Response(null, {
status: 204,
});
setCorsHeaders(response);
return response;
}

const handler = async (req: NextRequest) => {
const response = await fetchRequestHandler({
endpoint: "/api/trpc",
router: appRouter,
req,
createContext: () => createTRPCContext({ req }),
onError({ error, path }) {
console.error(`>>> tRPC Error on '${path}'`, error);
},
});

setCorsHeaders(response);
return response;
};

export { handler as GET, handler as POST };
import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@acme/api";

export const runtime = "edge";

/**
* Configure basic CORS headers
* You should extend this to match your needs
*/
function setCorsHeaders(res: Response) {
res.headers.set("Access-Control-Allow-Origin", "*");
res.headers.set("Access-Control-Request-Method", "*");
res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
const response = new Response(null, {
status: 204,
});
setCorsHeaders(response);
return response;
}

const handler = async (req: NextRequest) => {
const response = await fetchRequestHandler({
endpoint: "/api/trpc",
router: appRouter,
req,
createContext: () => createTRPCContext({ req }),
onError({ error, path }) {
console.error(`>>> tRPC Error on '${path}'`, error);
},
});

setCorsHeaders(response);
return response;
};

export { handler as GET, handler as POST };
my trpc.ts file is setup by the way clerk docs sugessted:
import type {
SignedInAuthObject,
SignedOutAuthObject,
} from "@clerk/nextjs/api";
import { getAuth } from "@clerk/nextjs/server";

import { initTRPC, TRPCError } from "@trpc/server";
import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import superjson from "superjson";

import { prisma } from "@acme/db";

interface AuthContext {
auth: SignedInAuthObject | SignedOutAuthObject;
}

const createInnerTRPCContext = ({ auth }: AuthContext) => {
return {
auth,
prisma,
};
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
return createInnerTRPCContext({ auth: getAuth(opts.req) });
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape }) {
return shape;
},
});

const isAuthed = t.middleware(({ next, ctx }) => {
if (!ctx.auth.userId) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}

return next({
ctx: {
auth: ctx.auth,
},
});
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);
import type {
SignedInAuthObject,
SignedOutAuthObject,
} from "@clerk/nextjs/api";
import { getAuth } from "@clerk/nextjs/server";

import { initTRPC, TRPCError } from "@trpc/server";
import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import superjson from "superjson";

import { prisma } from "@acme/db";

interface AuthContext {
auth: SignedInAuthObject | SignedOutAuthObject;
}

const createInnerTRPCContext = ({ auth }: AuthContext) => {
return {
auth,
prisma,
};
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
return createInnerTRPCContext({ auth: getAuth(opts.req) });
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape }) {
return shape;
},
});

const isAuthed = t.middleware(({ next, ctx }) => {
if (!ctx.auth.userId) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}

return next({
ctx: {
auth: ctx.auth,
},
});
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);
Any help would be much appreciated.