Getting previous state from field.value

[kyusungpark]

Hi, I am working with react hook form with shadcn. I have a weird problem where I get previous state when I move across different forms.

const MathInput = <T extends FieldValues>({ form, path, item }: MathInput<T>) => {
  const userAnswerPath = `${path}.userAnswer` as Path<T>;
  const { question, hasDiagram } = item;

  const testMode = useTestStore.use.testMode();

  const handleInputChange: HandleInputChange = (value, onChange) => {
    const sanitizedValue = value.replace(/[^0-9/.-]/g, '');
    onChange(sanitizedValue);
  };

  return (
    <div className="space-y-3 px-6">
      <MarkForReview disabled form={form} path={path} />
      <FormField
        control={form.control}
        name={userAnswerPath}
        render={({ field }) => {
          // TODO: I don't know why field.value is not working. It keeps returning the previous value. Probably has to do with null, but even when I set it to an empty string, it still doesn't work.
          const currentValue = form.getValues(userAnswerPath);

          return (
            <>
              <FormItem className="space-y-2 p-2">
                <FormLabel className="text-md">
                  {hasDiagram && <LazyLoadImage question={item} vw={10} />}
                  <Latex latex={question} />
                </FormLabel>

                <div className="relative">
                  <FormControl className="mt-2">
                    <Input
                      {...field}
                      disabled={testMode === 'REVIEW'}
                      placeholder="Enter your answer"
                      maxLength={6}
                      className="pr-8"
                      value={currentValue || ''}
                      onChange={(e) => handleInputChange(e.target.value, field.onChange)}
                    />
                  </FormControl>
            </>
          );
        }}
      />
    </div>
  );
};

If I pass in field.value into the Inputbox (default value is null) and move around my form, the previous value persist in the Input box. But the form state correctly shows the value it should be. I had to use form.getValues(userAnswerPath) to correctly show the value I want into the form. Any ideas how I can keep using field.value to display the correct value?

Thank you!