Zob nested object with react hook form?

import { z } from "zod";

const createClientSchema = z.object({
    firstname: z.string(),
    lastname: z.string(),
    bank_account: z.object({
        iban: z.string(),
        bic: z.string().optional(),
        bank_name: z.string(),
        account_owner: z.string(),
    }),
})

export { createClientSchema }

<div className="col-span-6 sm:col-span-3">
    <Label htmlFor="iban">IBAN</Label>
    <Input
    id="iban"
    type="text"
    name="iban"
    disabled={isSubmitting}
    />
    {errors.bank_account?.iban && (
    <p className="text-sm text-red-600 mt-1">
        {errors.bank_account?.iban.message}
    </p>
    )}
</div>

bank_account
: 
message
: 
"Required"
ref
: 
undefined
type
: 
"invalid_type"