Keep the input value after form submission

[AnsBdran]

I'm have a trouble making the input values keep their values after the for has been submitted and failed.

[AnsBdran]

[AnsBdran]

@edmundhung

[AnsBdran]

the code:

const CollectionForm = ({ tags }: Props) => {
  const [lastResult, formAction] = useActionState<
    SubmissionResult<CollectionSchemaType>
  >(action, undefined);
  const { getErrorMessage } = useFormErrorMessage();
  const t = useTranslations('form');
  const { spreader } = useSpreader();

  const [form, fields] = useForm<CollectionSchemaType>({
    lastResult,
  });

  console.log('lastResult', lastResult);

  return (
    <form id={form.id} noValidate onSubmit={form.onSubmit} action={formAction}>
      <Stack gap={consts.FORM_STACK_GAP}>
        <TextInput
          label={t('fields.labels.collectionName')}
          description={t('fields.descriptions.collectionDescription')}
          {...spreader(fields.title, {
            label: 'collectionName',
          })}
		// spreader spreads defaultValue, name and key props.
          defaultValue={fields.title.initialValue}
          name={fields.title.name}
          key={fields.title.key}
          withAsterisk
        />
        <TextInput
          label={t('fields.labels.collectionDescription')}
          description={t('fields.descriptions.collectionDescription')}
          {...spreader(fields.description, {
            label: 'collectionDescription',
          })}
          withAsterisk
        />

 

        <SubmitBtn label='create' />
      </Stack>
    </form>
  );
};

export default CollectionForm;