I’m having a little trouble wherein the when I tried to type something in my input field, I get this warning. I think it’s on the password and newPassword

Warning: A component is changing an uncontrolled input to be
controlled. This is likely caused by the value changing from undefined
to a defined value, which should not happen. Decide between using a
controlled or uncontrolled input element for the lifetime of the
component. More info: https://reactjs.org/link/controlled-components

UpdatePage.tsx

 const form = useForm<z.infer<typeof SettingsSchema>>({
    resolver: zodResolver(SettingsSchema),
    defaultValues: {
      password: undefined,
      newPassword: undefined,
      name: user?.name || undefined,
      email: user?.email || undefined,
      role: user?.role || undefined,
    },
  });


return (
<>
  <FormField
    control={form.control}
    name="password"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Pasword</FormLabel>
        <FormControl>
          <Input
            disabled={isPending}
            placeholder="******"
            {...field}
            type="password"
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
  <FormField
    control={form.control}
    name="newPassword"
    render={({ field }) => (
      <FormItem>
        <FormLabel>New Password</FormLabel>
        <FormControl>
          <Input
            disabled={isPending}
            placeholder="******"
            {...field}
            type="password"
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
</>;


)