Nullable inputs in react hook form with zod validation

[MincePie]

I am ready to give up trying with zod and react hook form.

I would like to have a nullable input field in my form. if an entry is made, then it must be a number between 1-5. Null values are fine because the field is nullable.

ATTEMPT 1:
scientific_merit_score: z.number()
.nullable(),
// .refine((val) => val === null || (val >= 1 && val <= 5), {
// message: 'Score must be between 1 and 5',
// }),
ATTEMPT 2:
.refine(value => value === null || value >= 1, {
message: 'Number must be greater than or equal to 1',
})
.refine(value => value === null || value <= 5, {
message: 'Number must be less than or equal to 5',
}),
ATTEMPT 3:
z.number().min(1).max(5).nullable(),

<Input
type="number"
min={1}
max={5}
{...register(name, {
valueAsNumber: false,
setValueAs: v => v === '' ? null : Number(v)
})}
data-invalid={touchedFields[name] && !!errors[name] ? 'true' : undefined}
/>
{errors[name] && (

{errors[name]?.message}

)}

I have given up trying to use zod schema validation to check that it is a number between 1-5. None of the 3 attempts I have made above work.

Can anyone offer suggestions on what else I might try to allow null values in an input field -or alternatively check if the number is in the range?

I think part of the issue is that the form imposes a default value of 0. I've tried handling that and treating it is null, but it doesn't help to solve this.

<Input
type="number"
min={1}
max={5}
{...register(name, {
valueAsNumber: false,
setValueAs: v => v === 0 ? null : Number(v)
})}
data-invalid={touchedFields[name] && !!errors[name] ? 'true' : undefined}
/>