useMutation() runs 3 times

import { initTRPC } from '@trpc/server'
import superjson from 'superjson'

import routers from './routers'
import { brandFormSchema } from './zod-schemas'

const t = initTRPC.create({ isServer: true, transformer: superjson })

export const router = t.router({
  ...routers
})

export type AppRouter = typeof router

import { notifications } from '@mantine/notifications'
import { trpcReact } from '@renderer/util/trpc'

import BrandForm from './brand-form'

type Props = {
  onCreated: () => void
  onCancel: () => void
}

function CreateBrand({ onCreated, onCancel }: Props): JSX.Element {
  const utils = trpcReact.useUtils()

  const { mutate, isLoading } = trpcReact.brand.create.useMutation({
    onSuccess: (): void => {
      utils.brand.all.invalidate()
      notifications.show({
        message: 'Added brand successfully!',
        color: 'green'
      })
    },
    onError: (error): void => {
      notifications.show({
        message: 'Brand not added!' + error,
        color: 'red'
      })
    }
  })

  return (
    <BrandForm
      loading={isLoading}
      submitHandler={(values): void => {
        mutate(values)
        onCreated()
      }}
      cancelHandler={(): void => {
        onCancel()
      }}
    />
  )
}

export default CreateBrand