Getting error useMutation does not exist on type 'DecorateProcedure<MutationProcedure> when trying to use useMutation

I'm using NextJS app router.

I'm trying to call a pretty simple route:

import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

// doc send user email to waitlist database
export const createEmailRouter = createTRPCRouter({
  postEmail: publicProcedure
    .input(
      z.object({
        email: z.string().email(),
      }),
    )
    .mutation(async ({ input }) => {
      console.log("email", input.email);
      return {
        email: input.email,
      };
    }),
});

Than in the root.ts I add the route:

export const appRouter = createTRPCRouter({
  post: postRouter,
  storeEmail: createEmailRouter,
});

But when I try to call the .useMutation for this route in my page I always get the following error:

Any clue of how to solve this? Couldn't find any info online.

Thanks!

While importing api, import it from

~trpc/react

as opposed to

~trpc/server