Action Fails - LastResult doesn't populate fields

[ScottDalessandro]

I ran into a scenario where saving a record in my db failed (this happened in a remix action). I noticed that the form did not populate with the previous entries that were submitted. Here is an example:

type ActionData = SubmissionResult | undefined

const RegistrySchema = z.object({
	title: z.string().min(1, 'Title is required'),
	eventType: z.enum(['birthday', 'wedding', 'baby-shower', 'other'], {
		errorMap: () => ({ message: 'Please select an event type' }),
	}),
	eventDate: z
		.string()
		.min(1, 'Event date is required')
		.refine((str) => !isNaN(Date.parse(str)), {
			message: 'Invalid date format',
		})
		.transform((str) => {
			const date = new Date(str)
			// Remove time component for consistency
			return new Date(date.getFullYear(), date.getMonth(), date.getDate())
		}),
	location: z.string().min(1, 'Location is required'),
	guestCount: z.number().min(1, 'Must have at least 1 guest'),
	description: z.string().optional(),
})

export async function action({ request }: ActionFunctionArgs) {
	const formData = await request.formData()
	const submission = parseWithZod(formData, {
		schema: RegistrySchema,
	})

	if (submission.status !== 'success') {
		return submission
	}

	// throw a response with the submission value

	try {
		throw new Error('FAILED TO SAVE TO DB')
		const userId = await requireUserId(request)
		const registry = await prisma.registry.create({
			data: {
				...submission.value,
				userId,
			},
		})

		return redirect(`/registries/${registry.id}`)
	} catch (error) {
		console.error('Failed to create registry:', error)
		console.log('IN THE CATCH BLOCK AFTER THE DB CALL')
		return Response.json(
			{
				...submission,
				status: 'error' as const,
				error: { form: 'Failed to create registry. Please try again.' },
				value: submission.value,
				payload: formData,
			},
			{ status: 500 },
		)
	}
}

export default function NewRegistry() {
	const lastResult = useActionData<typeof action>() as ActionData

	console.log('lastResult', lastResult)

	const [form, fields] = useForm({
		lastResult,
		constraint: getZodConstraint(RegistrySchema),
		onValidate({ formData }) {
			return parseWithZod(formData, { schema: RegistrySchema })
		},
		defaultValue: {
			title: 'TESTING',
			eventType: '',
			eventDate: '',
			location: '',
			guestCount: 1,
			description: '',
		},
		shouldValidate: 'onBlur',
	})

	return (
		<div className="mx-auto max-w-3xl p-8">
			<h1 className="mb-8 text-2xl font-bold">Create New Registry</h1>

			<Form method="post" className="space-y-6" {...getFormProps(form)}>
				<div>
					<Label htmlFor={fields.title.id}>Registry Title</Label>

					<Input
						{...getInputProps(fields.title, {
							type: 'text',
						})}
					/>
					{/* {fields.title.errors?.length && (
						<span className="text-red-500">{fields.title.errors}</span>
					)} */}
				</div>

				<div>
					<Label htmlFor={fields.eventType.id}>Event Type</Label>
					<select
						{...getSelectProps(fields.eventType)}
						className="w-full rounded border border-gray-300 px-3 py-2 text-black"
					>
						<option value="">Select event type...</option>
						<option value="birthday">Birthday</option>
						<option value="wedding">Wedding</option>
						<option value="baby-shower">Baby Shower</option>
						<option value="other">Other</option>
					</select>
					{/* {fields.eventType.errors?.length && (
						<span className="text-red-500">{fields.eventType.errors}</span>
					)} */}
				</div>

				<div>
					<Label htmlFor={fields.eventDate.id}>Event Date</Label>
					<Input {...getInputProps(fields.eventDate, { type: 'date' })} />
					{/* {fields.eventDate.errors?.length && (
						<span className="text-red-500">{fields.eventDate.errors}</span>
					)} */}
				</div>

				<div>
					<Label htmlFor={fields.location.id}>Location</Label>
					<Input {...getInputProps(fields.location, { type: 'text' })} />
					{/* {fields.location.errors?.length && (
						<span className="text-red-500">{fields.location.errors}</span>
					)} */}
				</div>

				<div>
					<Label htmlFor={fields.guestCount.id}>Number of Guests</Label>
					<Input {...getInputProps(fields.guestCount, { type: 'number' })} />
					{/* {fields.guestCount.errors?.length && (
						<span className="text-red-500">{fields.guestCount.errors}</span>
					)} */}
				</div>

				<div>
					<Label htmlFor={fields.description.id}>Description</Label>
					<textarea
						{...getTextareaProps(fields.description)}
						className="font-blue w-full rounded border border-gray-300 px-3 py-2 text-black"
						rows={4}
					/>
					{/* {fields.description.errors?.length && (
						<span className="text-red-500">{fields.description.errors}</span>
					)} */}
				</div>

				<Button type="submit">Create Registry</Button>
			</Form>
		</div>
	)
}

Why doesn't the form populate with the values from lastResult? When I log lasResult the values are there in lastResult.value.