Calling trpc mutations on client components with app router

import { api } from "~/trpc/react";
export function EpisodeForm({ id }: EpisodeFormProps) {
  const [open, setOpen] = useState(false);

  const utils = api.useUtils();
  const createEpisode = api.episode.create.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  const updateEpisode = api.episode.update.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  ...

async function onSubmit() {
  await form.trigger();
  const errors = Object.keys(form.formState.errors);
  if (errors.length > 0) {
    throw new Error("Form has errors");
  }
  if (!!id) {
    updateEpisode.mutate({
      id,
      ...form.getValues(),
    });
  } else {
    createEpisode.mutate({
      ...form.getValues(),
    });
  }
  form.reset();
}