How to create an object with a mutation. Getting React error `Invalid hook call`

import { createTRPCRouter, publicProcedure } from "../trpc";

export const userRouter = createTRPCRouter({
  create: publicProcedure.mutation(async ({ ctx }) => {
    return await ctx.prisma.user.create({
      data: {
        email: "create@test.com",
        firstName: "Peter",
        lastName: "Hansen",
        role: "MANAGER",
        clientId: "clhg7tzgz0000nhp0zwfmc0jm",
      },
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.user.findMany();
  }),
});

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const createUser = () => {
    api.users.create.useMutation();
  };
  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => createUser()}>Click Me</button>
    </>
  );
};

export default Create;

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: