Repository: ui
Issue: [bug]: Password input in multi-step form inherits value from previous step despite separate form instances
Labels: bug

### Describe the bug

When using 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.

### Affected component/components

Input, Form

### How to reproduce

1. Create a multi-step form using shadcn components
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

## Minimal Reproduction
```jsx
// 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>
  );
}

```

### Codesandbox/StackBlitz link

_No response_

### Logs

_No response_

### System Info

```bash
node v20.10.0
Chrome 131.0.6778.86
Safari 19616.2.9.11.12
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues