Error in date typing using the z.input and z.output method

Question

I have a service registration modal in which the user can initially enter a date in Date type, but it is sent to the API as a string in the future.

I've used the z.input and z.output methods to deal with this, but when it comes to passing the data via properties, the modal is taking my date property as a string, not as "Date" initially.

The error I get in my "form" property is this:

The type 'UseFormReturn<{ clientHashId: string; employeeHashId: string; serviceDate: Date; serviceHour: string; }, null, { clientHashId: string; employeeHashId: string; serviceDate: string; serviceHour: string; }>' cannot be assigned to type 'UseFormReturn<{ clientHashId: string; employeeHashId: string; serviceDate: string; serviceHour: string; }>'.
The types returned by 'watch()' are incompatible between these types.
The type '{ clientHashId: string; employeeHashId: string; serviceDate: Date; serviceHour: string; }' cannot be assigned to type '{ clientHashId: string; employeeHashId: string; serviceDate: string; serviceHour: string; }'.

Here's the modal's rendering code:

const {
    form: formNewAttendance,
    onSubmit: onSubmitNewAttendance,
    isPending: isPendingNewAttendance,
    isNewAttendanceModalOpen,
    setIsNewAttendanceModalOpen,
  } = useNewAttendanceController()

return (
  <Dialog
    open={isNewAttendanceModalOpen}
    onOpenChange={setIsNewAttendanceModalOpen}
  >
    <DialogTrigger asChild>
      <Button variant="outline" size="xs">
        <span>Registrar Atendimento</span>
        <Book className="ml-2 w-4 h-4" />
      </Button>
    </DialogTrigger>

    <NewAttendance
      form={formNewAttendance} // the error appears from here
      onSubmit={onSubmitNewAttendance}
      isPending={isPendingNewAttendance}
    />
  </Dialog>
)

This is where I'm making the validation schema for my form:

import { zodResolver } from '@hookform/resolvers/zod'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { addDays } from 'date-fns'
import { z } from 'zod'

import attendanceService from '@/services/attendanceService'

export const newAttendanceSchema = z.object({
  clientHashId: z.string({ required_error: 'ID do Cliente é obrigatório' }),
  employeeHashId: z.string({
    required_error: 'ID do Funcionário é obrigatório',
  }),
  serviceDate: z
    .date()
    .transform((date) => new Intl.DateTimeFormat().format(date)),
  serviceHour: z.string().transform((time) => time.concat(':00')),
})

export type NewAttendanceOutputSchema = z.output<typeof newAttendanceSchema>
export type NewAttendanceInputSchema = z.input<typeof newAttendanceSchema>

export function useNewAttendanceController() {

  const queryClient = useQueryClient()

  const { mutateAsync, isPending } = useMutation({
    mutationFn: attendanceService.registerService,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['get-attendances'],
      })
    },
  })

  const form = useForm<
    NewAttendanceInputSchema,
    null,
    NewAttendanceOutputSchema
  >({
    resolver: zodResolver(newAttendanceSchema),
    defaultValues: {
      clientHashId: '',
      employeeHashId: '',
      serviceDate: addDays(new Date(), 1),
      serviceHour: '',
    },
  })

  async function onSubmit(data: NewAttendanceOutputSchema) {
    try {
      await mutateAsync({
        clientHashId: data.clientHashId,
        employeeHashId: data.employeeHashId,
        serviceDate: data.serviceDate,
        serviceHour: data.serviceHour,
      })

      toast.success('Agendamento cadastrado com sucesso!')
      closeNewAttendanceModal()
    } catch (error) {
      // ...
    }
  }

  return {
    form,
    onSubmit,
    isPending,
    isNewAttendanceModalOpen,
    setIsNewAttendanceModalOpen,
    openNewAttendanceModal,
    closeNewAttendanceModal,
  }
}

I appreciate any help you can give.