Password input in multi-step form inherits value from previous step despite separate form instances

[samshome]

Bug Description

When using shadcn's Form and Input components in a multi-step form where one step collects an old password and the next step collects a new password:

1. The new password field in step 2 automatically inherits the old password value from step 1
2. This happens even when using completely separate useForm instances for each step
3. The form state (via watch() or logging) shows the correct empty value, but the input field visually displays the old password
4. The field becomes impossible to edit when using two separate forms, but becomes editable(while retaining the oldPassword value) if a single form is used.

Reproduction

1. Create a multi-step form
2. Step 1: Form with password input for "current password"
3. Step 2: Form with password input for "new password"
4. After entering current password and moving to step 2, the new password field is pre-filled

Expected Behavior

The new password field in step 2 should be empty and fully editable, regardless of what was entered in step 1.

Current Workaround

Adding a dummy password input field before the form prevents this behavior.

Code

// frontend/src/components/Account/Info/PasswordUpdateDialog.js
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { useForm } from "react-hook-form";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Lock } from "lucide-react";
export default function PasswordUpdateDialog({ isOpen, onClose }) {
  const [step, setStep] = useState(1);

  const stepOneForm = useForm({
    defaultValues: { oldPassword: "" },
  });

  const stepTwoForm = useForm({
    defaultValues: { newPassword: "" },
  });

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) {
          stepOneForm.reset();
          stepTwoForm.reset();
        }
        onClose();
      }}
    >
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Lock className="h-4 w-4" /> Change Password
          </DialogTitle>
        </DialogHeader>
        {step === 1 ? (
          <Form {...stepOneForm}>
            <form>
              <FormField
                control={stepOneForm.control}
                name="oldPassword"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Current Password</FormLabel>
                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                  </FormItem>
                )}
              />
              <button onClick={() => setStep(2)}>Next</button>
            </form>
          </Form>
        ) : (
          <Form {...stepTwoForm}>
            <form>
              <FormField
                control={stepTwoForm.control}
                name="newPassword"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>New Password</FormLabel>
                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                  </FormItem>
                )}
              />
            </form>
          </Form>
        )}
      </DialogContent>
    </Dialog>
  );
}